Making mobile width full screen & logo shrinking.

timb03

Hey there,

I'm having issues in getting the mobile version of this page https://socialrunner.net/introducing-brand-new-help-center/ go to the edges of the screen. 

I can do it by creating a mobile section & a desktop section, however I only want to have the 1 section.

I can make it go full screen by selecting "full width" in the section settings, but then on desktop it goes all the way to the edges of the screen too, which isn't good.

Also I would like to know why the logo on our home page gets smaller when you scroll down the page, essentially I'd just like it to stay the same size, not shrink.

Any help is appreciated!

Thanks

Albert

Hi,

1. To make your site full width, you need to set up Full Width class for the section. We do not have any other option that can be used instead.

2. This is how sticky logo works. It's always smaller when header is sticky. However, if you want to keep the same size, you need to use:

#Top_bar.is-sticky #logo img:not(.svg) { max-height: 60px !important; }
#Top_bar.is-sticky #logo { padding: 0 !important; }
#Top_bar #logo img { vertical-align: initial !important; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

timb03

Thanks for that. 

So is there no CSS I can change to make it full width on mobile only?

Albert

Like we wrote above, you can make it full width if you will use FULL WIDTH style for the section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

timb03

Yes, but if I do that it goes full width on desktop and tablet as well, I only want it to go full width on mobile, not all devices, how can I do that? Is there no mobile css I can change to make it go full width on mobile only?

timb03

Alright, I used the CSS that you posted in another thread and it worked perfectly!

And the logo size is also fixed with your help!

Thanks a lot, here's the code if anyone else need to make their mobile version full width without the desktop going full width also!

@media only screen and (max-width: 767px) {
    .section_wrapper, .container, .four.columns .widget-area { max-width: 95% !important; }
}

Albert

Great, glad to know that this css helped.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

timb03

Thanks!

Albert

You are welcome!

Learn more: Video Tutorials | How To | FAQ Vote on what comes next