Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1113917

    Hi

    I’ve seen the following solution to show a few logos in one line in the forum, but I want to make it slightly different.

    
    	.responsive #top #wrap_all .avia-logo-element-container .slide-entry {
    		width: 33% !important;
    		clear: none!important;
    		margin-left: 0;
    	}

    How can I change the width to logos that are in a 4-columned element?
    I mean, that the other logos will still have a width of 33%, but only the ones that are in a 4-columned Partner/Logo Element will have width of 25%.

    Thank you!

    #1114296

    Hey barak97,

    You would need to target and add to the code the class that shows the 4 columns.

    Best regards,
    Basilis

    #1114421

    I added the css class “four-columns-grid” to the Partner/Logo Element in the page and tried to target it this way, but it didn’t work:

    	.responsive #top #wrap_all .avia-logo-element-container .four-columns-grid .slide-entry {
    		width: 25% !important;
    	}
    #1114480

    Hi barak97,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    #1114561

    Of course, see link below.

    #1114643

    Hi barak97,

    Thank you. Can you disable caching and minification for now?

    Best regards,
    Victoria

    #1114971

    Hi,

    See link below to a sandbox with no cache or minification.

    Thank you

    #1115557

    Hi barak97,

    The 4 logos are wrapped in a single container and so you cannot show 3×3, that’s why your css leads to 3×1.

    With current css layout, this is the optimal look
    https://cl.ly/4f07af0c18f9 and it is achieved when customizations are removed.

    Best regards,
    Victoria

    #1115737

    Thank you Victoria,

    I do not want to show 3×3 but 4×2 (4 images in a row, 2 rows).
    So I want the items size to be 25%, but only when it’s a 4-columned Partner/Logo Element (There are other pages with a 6-columned element, which on mobile shows 3 columnes due to the code I showed above. ex in Private content)

    #1116244

    Hi barak97,

    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 (max-width: 767px) {
     .responsive #top.page-id-59  #wrap_all .avia-logo-element-container .slide-entry {
          width: 16% !important;
      }
    .responsive #top.page-id-4886 #wrap_all .avia-logo-element-container .slide-entry {
        width: 25% !important;
    }
    }
    

    The code above uses the page id class and sh should work on different pages.
    If you need further assistance please let us know.

    Best regards,
    Victoria

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