Smartphone View

A couple of smartphone viewing issues:

1. There is a large gap between the logo and slider in mobile view. How can I reduce the size of the gap without it affecting the gap on desktops?
2. I would like to remove the background and have the slider and body fill the width of the screen. The current text paragraph width is fine as it is.

 

Hello,

1.
Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 767px){
.header {
margin-bottom:5px;
}
} 

2.
It is not possible to increase the width of the theme because Compass theme is implemented on 1250 responsive grid system, If we try to increase its width, It will break the layout of the theme.


Thanks & Regards
Gourav Shrivastava

 

2. understood.

1. The code is not working. I suspect it is because I have the following css which is needed to make my slightly larger logo (250 x 140px) centre with the navigation menu.

.header .menu_wrapper {
margin-top: 60px;
}

.header {
margin: 0px 0px 0px 0px;
}

Is there a work around? Also, the logo is not centre aligned on mobile devices (even when I remove all css from the custom css box). It is off centre to the right slightly.

 

Hello,

Do let us know your website link.


Thanks & Regards
Gourav Shrivastava

 

Hi Gourav, I am on a localhost server.

Check your own demo compass theme on a smartphone. The logo is not centered at is should be.

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

 
@media only screen and (max-width: 480px){
.header .logo {
margin-left: 16px;
}
} 

Adjust its value as per your requirements.


Thanks & Regards
Gourav Shrivastava

 

Perfect, thanks Gourav.

margin-left: 10px;

has fixed the standard size logo alignment.