Hi team,
I’m having a huge problem with the mobile view. I used the Headline, Slider Widget & Features Widget one one page of my site, forcing the margins to be wider ()using my theme’s CSS customizer) in order to display the content properly.
BUT! Now it is squished horribly on iphones and we’re expecting a lot of traffic to the site tomorrow. Nightmare. I have spent hours on this to no avail. Also tried the SiteOrigin CSS widget and still could not solve my problem.
Any help to correct this would be greatly appreciated!
This is the page in question.
Thanks!
Lindsay
Hi Lins,
This is happening due to the CSS Styles you’ve applied to those widgets – the CSS is simply sized too large for mobile devices. Please open the Headline Widget that contains “2017-18 Constellation Learning Group Features” and head over to the widget styles sidebar. Open the Attribute Settings group and please override your CSS styles (specifically the margin, which is set to 180px and the width, which is set to 900px) with mobile friendly versions. Such as:
width: auto; margin-left: 0;Please open the slider widget (it has an image of all of the different modules) and head over to the widget styles sidebar. Open the Attribute Settings group and remove the width from the CSS Styles field – you’ve applied this elsewhere already.
Then please open up your custom CSS and remove:
.so-widget-sow-features { width: 920px; margin-left: -180px; padding: 30px 30px 30px 15px; }Find and remove:
.so-widget-sow-slider { width: 1020px; margin-left: -200px; }Add:
@media (min-width: 1000px) { .so-widget-sow-features { width: 920px; margin-left: -180px; padding: 30px 30px 30px 15px; } .so-widget-sow-slider { width: 1020px; margin-left: -200px; } }Alter the min-width as desired. Don’t decrease it, but you can definitely increase it depending on sizing.
Let me know when you’ve done this and I’ll take another look.
Hi Alex,
I tried posting a reply yesterday but must have forgotten to press “submit.”
So first, THANKS for this prompt assistance, it helped a lot! However there is still something odd with the view on my iPhone 6. There’s about an inch-wide space on the right-hand side that shows just the body background color (yellow). The actual width of the page is reduced significantly because of this. I don’t know why or how to fix it! Thoughts?
with appreciation,
Lindsay
Hi Lins
You can remove that spacing with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS:
@media (max-width: 630px) { .sow-features-list { margin: 0; } }You might also need to install the SiteOrigin CSS Editor.
Alex, this all worked fine a month ago (I forgot to tell you!) But my client just let me know the page is out of whack again. It’s live, and all of the margins are now suddenly shifted to the left! Please help!
Lindsay
Another update: I went in to adjust the CSS for left margins and it is improving. But I still have no idea why it randomly CHANGED! Please let me know if I should anticipate this in the future. It is very disconcerting.
Hi Lins,
I just had a look at your setup and you’ve added the CSS I previously suggested to remove back:
.so-widget-sow-features { width: 920px; margin-left: -180px; padding: 30px 30px 30px 15px; }If you want a row to be bigger, you should instead change the container, not the individual widget or this sort of issue will keep happening. I’d like to help you with adjusting the container but, unfortunately, this is beyond the scope of the support we’re able to offer on our free forums.
We do offer this level of support to our premium users, so if you’d like to upgrade to SiteOrigin Premium, then I can help you over email support.