-
Posts
-
Hi,
i want to use a partner/logo element on my enfold webpage to show my partners to my customers. But it has a pretty strange arrangement when scaling, and in generel i dont understand the margins, and I do not really know who to fix this.
So, i added a 3 Column Partner/Logo element. Currently it has 4 Elements in it. When i scale the browser to smartphone size, the elements are displayed stacked. The 1st element has a bottom margin of 20px, the 2nd hasn’t but the 3rd has a bottom margin again.
When making the browser window a little wider, the 4 elements are displayed in 3 rows. 1st row has 1 element, 2nd row has 2 elements, 3rd row has 1 element.
I do not really understand if this bahavior is the desired one. So in my opinion it would be better if every Element has a margin of (e.g.) 10px all around, and they are displayed in 3 columns or in 1, but not mixed.
Can you explain this bahavior to me (something like the deeper sense of it) and maybe you can tell me how i can fix it. Thank you.
Hi,
Thank you for using Enfold.
Did you set the number of Columns? Make sure that the number of images are even or it coincides with the number of columns selected. Example: If you have 4 logo images, make sure to set the columns to 2 or 4 to create 2 rows with 2 images or 1 row with 4 images.
Best regards,
IsmaelHi,
This is not the default behavior since we cannot see the setup in the backend it is hard to tell what exactly is causing this issue. However to resolve this please add the below code to the Quick CSS field in Enfold >general Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) { .avia-logo-grid .slide-entry-wrap .slide-loop-2 { margin-bottom:20px!important; }}Best regards,
VinnieThank you for your answers.
@Ismael: In the Backend i set up 3 colums. But even with only three images it has the same behavior (see the link below): when sizing the browserwindow down it shows 1 logo in the first row and 2 in the second row. To get a 3 row view i need to size it down further more.@Vinnie: i added that code to the quick css. that helps. But i would rather like to know what is causing this problem. I added some login credentials for you for my testing page. It is configured similarly to the productive one.
So i tried it with a clean install of WordPress and a clean Enfold installation. See the link below. There it has the Same Behavior.
Hi,
The logo/partner element should works fine with the default setup. please make sure all images are of same size.
We still cannot see how you have setup since that is on a different installation let us know if you have used any custom css or modification?
Best regards,
VinnieHi,
it is a standard installation. No customization of theme or wordpress. Just a simple and clean installation. The Images are all the same size. Below are login credentials for the second site.
Greetings
Since it doesnt work, even with a fresh installation of WordPress & enfold, it seems to me, that it is either a bug or it behaves as suggested.
So, in the end i simply added 4 quater sized colums and added 1 partner image / logo per column. That behaves as desired. Sadly I cannot use the caption in this szenario, because grayscaling wouldn’t work then.
Maybe you are able to solve this problem some time.
Hi,
We have atted the below css and fixed the issue please check the link in private
/*partner logo margin fix*/ @media only screen and (max-width: 479px) { .responsive #top #wrap_all .avia-content-slider-odd .slide-entry { margin-bottom: 20px!important; }}It’s not clear what you like to do with the caption please elaborate or point us to an example so we can help you with it.
Best regards,
Vinnie
- You must be logged in to reply to this topic.