Hi Guys,
I need help getting my rich text box to align on mobile. If i enable full width mode on mobile, the text sits to the left of the screen.
Thanks in advance.
Ryan
Thank you for the screenshot and for the link to the storefront. I had a look and I noticed a few things that might be affecting the alignment of this content on your store. I am not a trained developer, so I am not able to provide a solution to this issue. But I think I can help you narrow it down.
I noticed that your mobile view for your online store never scales to the screen properly. There is always a bit of extra content on the right side of the display that can be pulled over. I believe you have made some changes to the padding on your website that has affected the alignment of your content. On desktop the content is pushed to the farthest edge, which is not the traditional amount of padding on an online store.
In my screenshot (also using the Dawn theme) you can see that center is very clearly defined within all the content:
To me the alignment of the website itself is off and needs to be corrected. Unless you made alterations to the rich text section in your theme code to affect its alignment.
Yes this is true, we made adjustments to the screen width so the header for instance would fill the screen left to right.
I agree we also have too much accessible left to right screen on mobile, not sure how or where to adjust this as it was a long time ago when i added the code into base.css.
Any ideas would be appreciated
.page-width {
margin: 0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
max-width: 100% !important;
}
Its this code!! With this removed the problems have gone, however i want the icons in my header to be spaced full width. Any ideas?
I am glad you were able to find the problem code! Unfortunately the requirements of that customization are outside my scope of knowledge. It looks like it would require specifics related to mobile vs desktop view to make it fit nice and clean.
Since you are using the dawn theme, this may be something our in house theme support may be able to assist with. I would finish making your other customizations first though before requesting them to make that change, just to ensure that it doesn’t interfere with anything else you want to work on.
Hey! Found the sollution for it, since it’s an old post hope it will help others.
Insert this code into theme.liquid
@media screen and (min-width: 750px) { .page-width { margin: 0 !important; max-width: 100% !important; } }