When viewing the website on mobile, some sections don't have padding and are basically touching the edge of the screen (even though in the backend they have padding and show on the web version fine).
In the first image you can see how close it is to the edge, in the second image the padding seems to have stayed for that section.
No they are not touching the edges but in comparison there is a much closer distance to the edge. Is there not a way to add padding too? Or if not to center align instead of left align (but only in mobile).
In the header can the off canvas Menu button be moved to drop below the logo say?
When viewing the website on mobile, some sections don't have padding and are basically touching the edge of the screen (even though in the backend they have padding and show on the web version fine).
In the first image you can see how close it is to the edge, in the second image the padding seems to have stayed for that section.
Hey there,
Thanks for reaching in,
Could you please try this CSS in Salient > General Settings > CSS/Script Related > Custom CSS Code.
@media only screen and (max-width: 690px) { .full-width-content.wpb_row .span_12 > .col .wpb_wrapper { padding: 10px!important; } }Hope this helps,
Regards
Thank you! thats worked perfectly, is there anyway I can also apply it to the header and footer?
Hi Romina,
The contents of the header and mobile i.e. icons logo and text are not really touching the sides and they are centered.
Maybe clarify a little bit.
Thanks.
No they are not touching the edges but in comparison there is a much closer distance to the edge. Is there not a way to add padding too? Or if not to center align instead of left align (but only in mobile).
In the header can the off canvas Menu button be moved to drop below the logo say?
Thank You
Hi Romina,
Could you try this CSS for those two items:
@media only screen and (max-width: 1000px) and (min-width: 1px){ #footer-widgets .container .col { text-align:center; } .material header#top .col.span_9, .material #header-outer[data-format="centered-menu-under-logo"] header#top .span_9 { text-align:center; position: relative!important; top:2em !important; } }Hope this helps.