How do I correct this to display correctly on mobile? Thank you!
Hello @weddingcrashers,
Thanks for writing to us.
I would suggest you please have a look at this documentation to learn more about how to make the website layout mobile-friendly.
Hope it helps
Thanks
Thank you, but I don’t know how to get into those options. Can you please direct me to where I can find those options? Thank you
Hello @weddingcrashers,
You will get these options on each element for example if you want to set the different column layouts on small and large screens I would suggest you please go to the page —>Row—>click on the Template —> Set the layout as per your design.
Hope it helps
Thanks
I was able to find that but no idea what I should do with those settings. Can you shoot a quick video?
Thank you
Hello @weddingcrashers,
Please have a look at this screen recording video to learn more about how to set column layout or font size on different screens.
https://youtu.be/-y881xP2Rxc
https://youtu.be/adu5b_-37AA
Thanks
Just checking in to see if you got my secure note, trying to tackle this issue. Thank you!
Hello @weddingcrashers,
I would suggest you please go to the cornerstone—>Theme options —>Custom code—>Global CSS add this custom CSS code.
.x-navbar .mobile .x-nav {
text-align: center;
}
For the section text, it seems that you have added the padding-left/right to the section, I would suggest you go to the section padding-left/right and set the padding for the small screen.
The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.
Hope it helps.
Thanks
I’m not sure sure why I would add customization, this is just basic stuff to look ok on mobile. Can you please assist with that?
Thank you
Hey Damien,
This is your Section padding settings:
The 100 pixel left and right padding have been set throughout the screen size which has caused the issue on smaller screens. This is why @Prakash_s gave the Responsive Styling documentation that you need to apply to resolve your mobile issue.
If you use Responsive Styling and set the left and right padding to 20 pixels for smaller device screens, the issue should be resolved.
Hope this makes sense.