Hi there,

 

I'm currently working with a Media Query theme, and I have a quick question on how to go about changing the way it behaves when re-sized.

 

See here for an online example.

 

http://o-p-o.org/test/

 

Regular CSS - http://o-p-o.org/test/css/style.css

Responsive CSS - http://o-p-o.org/test/css/responsive.css

 

Attached are some screenshots on how it behaves, and what I'm trying to achieve.

 

1.jpg is the full width currently, and 2.jpg is what I'd like it to look like.

 

3.Jpg is the medium width Currently and 4.jpg is what I'd like it to look like.

 

I've tried so many things to try and get this to work but I really can't figure out how to do this. Any help with this would be greatly appreciated.

 

Cheers.

Try adding:

@media only screen and (min-width: 992px) {
   .desc {
       display: none;
       }  
   #home-portfolio li.last, #home-blog li.last {
       display: block;
       } 
   #home-portfolio ul, #home-blog ul {
       margin: 0;
       }
   #home-portfolio li, #home-blog li {
       width: 225px;
       }
}
@media only screen and (max-width: 991px) {
      .desc {
       display: none;
       }  
   #home-portfolio li.last, #home-blog li.last {
       display: none;
       } 
   #home-portfolio ul, #home-blog ul {
       margin: 0;
       }
   #home-portfolio li, #home-blog li {
       width: 245px;
       margin-right: 11px;
       }
   .overlay {
       width: 245px;
       }
}

To the bottom of your responsive.css. You should be able to work it out from there.

 

Goodluck,

~evu.

Try adding:

@media only screen and (min-width: 992px) {
   .desc {
       display: none;
       }  
   #home-portfolio li.last, #home-blog li.last {
       display: block;
       } 
   #home-portfolio ul, #home-blog ul {
       margin: 0;
       }
   #home-portfolio li, #home-blog li {
       width: 225px;
       }
}
@media only screen and (max-width: 991px) {
      .desc {
       display: none;
       }  
   #home-portfolio li.last, #home-blog li.last {
       display: none;
       } 
   #home-portfolio ul, #home-blog ul {
       margin: 0;
       }
   #home-portfolio li, #home-blog li {
       width: 245px;
       margin-right: 11px;
       }
   .overlay {
       width: 245px;
       }
}

To the bottom of your responsive.css. You should be able to work it out from there.

 

Goodluck,

~evu.

 

Cannot thank you enough, works perfectly (:

 

Thanks Evu, greatly appreciate your help.

Edited July 1, 201214 yr by snick