Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 27, 2015 at 5:55 pm #494371
    marcbuote

    Hi,

    I have a 3 column, 1 row logo element on my site. It scales correctly and maintains the 3 column 1 row layout until it reaches screen size 767px, then it switches to 1 column 3 rows, where the logos are stacked and all 3 slide at once.

    How can i change it so it maintains the 3 column, 1 row layout at all screen sizes. I do not want it to go stacked or have the logos very big.

    Thanks!

    August 28, 2015 at 9:36 am #494695
    Rikard

    Hey marcbuote,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Thanks,
    Rikard

    August 30, 2015 at 7:02 pm #495503
    marcbuote

    The logo slider is near the bottom of the page

    September 1, 2015 at 3:49 am #496189
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
.responsive #top .avia-smallarrow-slider .flex_column {
    width: 33.3% !important;
}
}

    Best regards,
    Rikard

    September 1, 2015 at 4:01 am #496196
    marcbuote

    No, that didn’t work. Caused the logos to stack and only use 33% of the width of the screen, instead of 3 logos on 1 row using 100% of the screen.

    September 1, 2015 at 7:19 am #496238
    Basilis

    Hi!

    Please try

    @media only screen and (max-width: 767px) {
.responsive #top .avia-smallarrow-slider .flex_column {
    width: 33.3% !important;
display: inline;
}
}

    and let me know if I understood correctly what you need to do

    Regards,
    Basilis

    September 1, 2015 at 3:27 pm #496442
    marcbuote

    That didn’t seem to work. I’ve attached a screenshot showing what I am trying to have, and what it looks like now.

    September 2, 2015 at 3:11 pm #497169
    Elliott

    Hi!

    Try commenting out lines 1758 – 1770 in the /enfold/css/shortcodes.css file.

    @media only screen and (max-width: 767px)
{
	.responsive #top #wrap_all .slide-entry{width:48%; margin-left:4%}
	.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd,
	.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin:0; clear:both;}
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry.first{margin-left:0; width:100%;}
	.responsive avia-content-slider .slide-image img { width: 100%; }
}

@media only screen and (max-width: 479px)
{
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry{margin-left:0; clear:both; width:100%;}
}

    Or just copy that into your custom CSS and change the widths / margins with !important override.

    Best regards,
    Elliott

    September 2, 2015 at 8:15 pm #497358
    marcbuote

    Note sure if I understood you correctly or did this correctly. But instead of commenting the code out of the .css, I added the following to the custom css. Can you confirm this is correct?

    @media only screen and (max-width: 767px)
{
	.responsive #top #wrap_all .slide-entry{width:48%!important; margin-left:4%!important}
	.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd,
	.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin:0!important; clear:both;}
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry.first{margin-left:0!important; width:100%!important;}
	.responsive avia-content-slider .slide-image img { width: 100%!important; }
}

@media only screen and (max-width: 479px)
{
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry{margin-left:0!important; clear:both; width:100%!important;}
}
    September 3, 2015 at 3:41 pm #497712
    Andy

    Hi!

    should be working. Let us know if you still need help with this. Otherwise feel free to open a new ticket if you have some more questions or issues related to the theme.

    Cheers!
    Andy

    September 3, 2015 at 4:07 pm #497733
    marcbuote

    Thank you so much for all the help. The settings above didn’t fix it but with some playing around. The following settings worked.

    @media only screen and (max-width: 767px)
{
	.responsive #top #wrap_all .slide-entry{width:33%!important; margin-left:0%!important}
	.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd,
	.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin:0!important; clear:right;}
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry.first{margin-left:0!important; width:33%!important;}
	.responsive avia-content-slider .slide-image img { width: 33%!important; }
}

@media only screen and (max-width: 479px)
{
	.responsive #top #wrap_all .avia-content-slider-odd  .slide-entry{margin-left:0!important; clear:right; width:33%!important;}
}
    September 4, 2015 at 12:39 pm #498288
    Rikard

    Hi,

    Great, so you’re all good now?

    Best regards,
    Rikard

    September 4, 2015 at 2:45 pm #498415
    marcbuote

    Yes, all good! Thank you all for the wonderful help yet again! Great to know that there are still theme developers that go above and beyond to help users create modifications.

    September 6, 2015 at 11:59 am #498830
    Rikard

    Hey,

    Great, glad you got it fixed and thanks for the kind words :-)

    Best regards,
    Rikard

    February 12, 2017 at 3:10 pm #745954
    photig

    Hi guys,

    I have a 5 column, 1 row logo element on my site, but i want it to shift to a 3 column, 1 row logo element in under 767px viewport size. Do you have any idea how i can achieve this?

    Thanks

    • This reply was modified 7 years, 9 months ago by photig.
    February 13, 2017 at 8:37 am #746207
    Rikard

    Hi @photig,

    Please post a link to your site along with a screenshot highlighting what you would like to achieve and we’ll have a closer look at it.

    Best regards,
    Rikard

    November 3, 2017 at 6:07 pm #872242
    SurigliaStudio

    Hello, i had same issue and solved with this post.
    I have another partner elements with 4 columns tho and i would like it to block at 25% and not taking the 33% size like the other one.
    If i set a class for this partners element how can i set the row elements at 25%?

    Thank you

    November 4, 2017 at 12:15 pm #872467
    Rikard

    Hi bitinteractive,

    Could you post a link to where we can see the element in question please?

    Best regards,
    Rikard

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