Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1268119

    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. 🙂

    • This topic was modified 3 years, 10 months ago by fusionxs.
    #1268594

    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

    #1268850

    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. 👍🏼

    #1268870

    Hi fusionxs,

    Glad we could help :)

    It’s great you enjoy using Enfold!

    Happy holidays!
    Best regards,
    Victoria

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.