adjusting responsive layout

This topic has 5 replies, 2 voices, and was last updated 10 years, 8 months ago by Sakin.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
March 1, 2014 at 11:42 pm #20854

jp_grennier
Member

Hi,

I’d like to make some minor adjustments to the responsive layout, for example when I view my site on my phone I find there to be too much white space below the social media icons. Is there a way I could easily make minor adjustments such as this?

Thanks,

jpg

March 2, 2014 at 6:52 pm #20864

Sakin
Keymaster

@jp_grennier: Yes you can. Send me your site URL and then I will check in.

March 2, 2014 at 9:13 pm #20870

jp_grennier
Member

http://jpgrennier.com

Another related issue – I’d like to make the banner shorter on the full-sized site (keeping the logo centered) if you wouldn’t mind helping with this as well…

Thanks!

jpg

March 2, 2014 at 11:53 pm #20876
Sakin
Keymaster
@jp_grennier: You change the padding and margin as per your need and add the following CSS in “Appearance => Theme Options => Custom CSS” box.
```
@media screen and (max-width: 960px) {
#header-right { padding-top: 30px; }
#header-right .widget.widget_catcheverest_social_widget, ul.social-profile li { margin-bottom: 10px; }
}
```
March 9, 2014 at 4:09 am #21095

jp_grennier
Member

Cool, could you possibly send me a list of the media breakpoints for the theme? There are minor adjustments I’d like to make for the various screen sizes. Thanks!

jpg

March 9, 2014 at 10:35 pm #21120
Sakin
Keymaster
@jp_grennier: You can check that from your responsive.css file.
```
@media screen and (min-width: 1190px) { }
@media screen and (max-width: 1060px) { }
@media screen and (max-width: 960px) { }
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { }
@media screen and (max-width: 767px) { }
@media only screen and (min-width: 480px) and (max-width: 767px) { }
@media screen and (max-width: 480px) { }
@media screen and (max-width: 320px) { }
```
Author

Posts