Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 27, 2019 at 12:18 pm #1113917
    barak97

    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!

    June 28, 2019 at 4:34 pm #1114296
    Basilis

    Hey barak97,

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

    Best regards,
    Basilis

    June 29, 2019 at 1:31 pm #1114421
    barak97

    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;
	}
    June 29, 2019 at 7:07 pm #1114480
    Victoria

    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

    June 30, 2019 at 6:50 am #1114561
    barak97

    Of course, see link below.

    June 30, 2019 at 6:23 pm #1114643
    Victoria

    Hi barak97,

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

    Best regards,
    Victoria

    July 1, 2019 at 9:51 pm #1114971
    barak97

    Hi,

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

    Thank you

    July 3, 2019 at 8:10 pm #1115557
    Victoria

    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

    July 4, 2019 at 12:42 pm #1115737
    barak97

    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)

    July 6, 2019 at 12:17 pm #1116244
    Victoria

    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

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