Hi
I currently have 4 text blocks (with 1px borders) that display as 25% in full width view on a large 2560px monitor as expected but as the screen resolution gets smaller, they become long thin blocks and become hard to read so I would like the ‘fourth’ text blocks to revert to 50% instead of 25% at certain screen resolutions.
Presuming that is possible, could you help me with it please and provide the CSS needed to change the blocks from 25% to 50% at a certain screen size like 1600px
I have included a link to my under construction website for you to see my issue on a screen resolution size similar to a mac air or an iPad pro.
Thanks in advance for your help. 🙂
Hey fusionxs,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) and (max-width: 1600px) {
#top #wrap_all #csia .av_one_fourth {
width: 47%;
display: block;
min-height: 520px;
margin-left: 10px;
margin-bottom: 10px;
}
#top #wrap_all #csia .flex_column_table {
display: block;
table-layout: initial;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Thanks, Victoria!
Support like this is why I have purchased 45 Enfold licenses to date and keep coming back. 🙂
I had to make a couple of tweaks by adding float: left and I adjusted the width % but fundamentally it resolved my issue.
Thanks again for your help. 👍🏼
Hi fusionxs,
Glad we could help :)
It’s great you enjoy using Enfold!
Happy holidays!
Best regards,
Victoria