I want my mobile to run full width but when I set a row in page builder as full width it takes up the entire screen on the desktop even if I have my full width set to 1200px in my theme. How can I fix this so full width is contained?
Full Width Mobile
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Liquified,
That’s odd. Full Width typically has a content container so it shouldn’t completely be the full width of the screen. Regardless, that’s not really what you’re after as that setting must effect everything. Can you please revert it? Then, do you have a public URL where we can take a look at your setup? This will allow me to write some CSS to allow for your setup to be full width on mobile only.
Yeah thats what I though to but as soon as I put it into full width it shoots across the entire screen on the desktop and laptop. Oddly enough though Full width does not work with the SiteOrigin Headline widget. It always has a padding.
The site is http://www.liquified.com and if you click here for example you will see the padding on the sides in mobile http://www.liquified.com/?event=paul-van-dyk&event_date=2017-05-11
I have everything reverted back to standard right now.
Hi Liquified,
So, to clarify, are you talking about just the green area or everything to the outside of the blue area?
If it’s everything, you can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:
@media (max-width: 780px) { #content-col, .panel-widget-style { padding-right: 0 !important; padding-left: 0 !important; } }How does that look?
if it’s just the green area, please add the following CSS:
@media (max-width: 780px) { .panel-widget-style { padding-right: 0 !important; padding-left: 0 !important; } }You might also need to install the SiteOrigin CSS Editor.
That worked KIND OF. The issue now is that the screen on mobile does not stay in place when you pull it left and right. It pulls off the screen to a big white area. Before adding the padding everything stay anchored down when you pulled left and right.
Also the headline does not stretch to the sides.
http://www.liquified.com/?event=shaun-frank&event_date=2017-05-05
actually fixed the headline KIND OF. I reset that row to standard but now that coding knocks out the mobile padding inside the site origin headline widget. I have it set to 20px right and left but as you can see the text does not pad.
Still have the problem of the screen on mobile does not stay in place when you pull it left and right. It pulls off the screen to a big white area. Before adding the padding everything stay anchored down when you pulled left and right.
Hi Liquified,
Sorry for the delay. By the looks of it, you’ve removed the applied styling. I’m unsure what was causing the scroll effect but maybe try:
@media (max-width: 780px) { #content-col { padding-right: 0 !important; padding-left: 0 !important; } }I had this one in
@media (max-width: 780px) {
#content-col, .panel-widget-style {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
but as soon as I took out .panel-widget-style and adjusted row padding and then padding inside the widget it seems to have worked
BUT I am still getting that weird left to right scrolling for some reason. Are you seeing this scrolling when you swipe on your mobile screen from left to right?
Hi Liquified,
I can’t seem to replicate that. To clarify, is that happening on an events page? On the home page? What device are you able to replicate this issue with?
Hm. Maybe try adding the following CSS (in addition to the above CSS) to WP AdminAppearanceCustom CSS:
@media (max-width: 780px) { .content { overflow-x: hidden; max-width: 100%; } }Does it still happen?
I was on an iPhone 7 Plus but that last bit of coding did the trick! Thank You!!!