Making mobile width full screen & logo shrinking.

timb03 · August 2016

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 · August 2016

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; }

timb03 · August 2016

Thanks for that.

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

Albert · August 2016

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

timb03 · August 2016

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 · August 2016

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 · August 2016

Great, glad to know that this css helped.

timb03 · August 2016

Thanks!

Albert · August 2016

You are welcome!

Making mobile width full screen & logo shrinking.

Comments