I am developing our new website in V9.0. I am having issues with Full Width Content rows being kicked out of position when testing on mobile. I was able to adjust the overall padding for mobile by using this CSS:
/* Padding on Mobile */
@media only screen and (max-width: 480px) {
body .container {
max-width: 80% !important;
}
}
Unfortunately, Full Width Content rows seem to ignore this code. Is there a code snippet that would work for rows with Full Width Content? I've attached an image that shows Full Width Background rows below and above a Full Width Content row.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
The CSS snippet works perfectly now at 375x667. But, when I resized the screen to tablet size, all the content stays at mobile size. Am I missing something? Please see attached.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Tahir, that fixed things! Everything is super clean and responsive now and properly aligned.
I did notice that the Full Width Content rows (some have inner rows, some don't) extend beyond the 320 px max-width. See attached. The row with the light green background is wider than the row above it.
Is there anyway to keep Full Width Content rows to 320 px max-width as well?
Hello,
I am developing our new website in V9.0. I am having issues with Full Width Content rows being kicked out of position when testing on mobile. I was able to adjust the overall padding for mobile by using this CSS:
/* Padding on Mobile */ @media only screen and (max-width: 480px) { body .container { max-width: 80% !important; } }
Unfortunately, Full Width Content rows seem to ignore this code. Is there a code snippet that would work for rows with Full Width Content? I've attached an image that shows Full Width Background rows below and above a Full Width Content row.
Thanks,
Riall
Hey Again,
Try using it.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for the quick response!
The CSS snippet works perfectly now at 375x667. But, when I resized the screen to tablet size, all the content stays at mobile size. Am I missing something? Please see attached.
Thanks,
Riall
My bad we need to use max-width not min-width .
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks
ThemeNectar Support Team
Tahir, that fixed things! Everything is super clean and responsive now and properly aligned.
I did notice that the Full Width Content rows (some have inner rows, some don't) extend beyond the 320 px max-width. See attached. The row with the light green background is wider than the row above it.
Is there anyway to keep Full Width Content rows to 320 px max-width as well?
Thank you for all your help!
Riall
Hi Again,
I just noticed the footer is out of position. See attached. Can you send me the code snippet for the footer to add to the previous CSS you sent me?
Thanks,
Riall
Hey Again, Hope you had a Great Weekend,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team