I am having issues with the layout of pages when I either reduce my browser width or view it on a vertical iPad/tablet. One one page, I have a row with four elements, but rather than shrinking as the window shrinks to maintain formatting, they are all shuffled off onto separate lines. I know this theme can support the shrinking imagery because I currently have my logo set up to do so - I just don't know the coding! Please help. Thanks a million!!!
To do that you need to add in an extra class to that particular row or column named "my-col-class" and Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width : 690px) and (max-width : 1000px) {
html body .my-col-class .wpb_column {
width: 31.666666666666668% !important;
}
}
Thanks for your help! However, the issue is still not resolved on mobile phones. The icons remain massive and the lines don't stay intact at all. See attached screenshot for example.
I am having issues with the layout of pages when I either reduce my browser width or view it on a vertical iPad/tablet. One one page, I have a row with four elements, but rather than shrinking as the window shrinks to maintain formatting, they are all shuffled off onto separate lines. I know this theme can support the shrinking imagery because I currently have my logo set up to do so - I just don't know the coding! Please help. Thanks a million!!!
Hey!
To do that you need to add in an extra class to that particular row or column named "my-col-class" and Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width : 690px) and (max-width : 1000px) { html body .my-col-class .wpb_column { width: 31.666666666666668% !important; } }
ThemeNectar Support Team
Thanks for your help! However, the issue is still not resolved on mobile phones. The icons remain massive and the lines don't stay intact at all. See attached screenshot for example.
Hey!
Yes that is because the min-width is set to 690 . Add this instead:
@media only screen and (min-width : 0px) and (max-width : 1000px) { html body .my-col-class .wpb_column { width: 31.666666666666668% !important; } }
Thanks
ThemeNectar Support Team
Thanks Tahir!