Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • November 29, 2017 at 5:26 pm #883116
    skynandi

    Hi,

    I’m building some simple case study pages and I have 6 Logos/Images displayed on the bottom of the page below the main content, the only way I could align it with the content is to put them into 1/3rd elements. It looks good but when the page brakes at 786px the logos turn big. I’ve tried the grid element, which has the option to keep the cells next to each other, but that won’t align with the content above. The 1/3rd elements look best, is there any way to change the breaking point on that?

    Screen Shot 2017-11-29 at 10.17.33 AM.png

    December 1, 2017 at 8:56 pm #884000
    Basilis

    Hey skynandi,

    Yes, but that would mean it will have to ” brake ” the grid and it is not something that we suggest doing.
    If you start with that, there will be more issues coming later one.

    Best, if you still wait to do it, is to create the logos as a shortcode with your own grid ( best option a

    • list )
      and add them then to the postion you want.

      Best regards,
      Basilis

    December 1, 2017 at 9:15 pm #884004
    skynandi

    Hi Basilis,

    Thanks for the reply,

    I have 3 logos in a row, all I wanted to achieve is to keep them next to each other on mobile and other small screens as well, which is what happens until about 768px when the logos jump to a single line.

    Thanks,

    December 3, 2017 at 5:33 am #884255
    Rikard

    Hi,

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

    @media only screen and (max-width: 767px) {
.page-id-3208 #after_full_slider_1 .av_one_third {
    margin-left: 6% !important;
    width: 29.333333333333332% !important;
}

.page-id-3208 #after_full_slider_1 .av_one_third.first {
    margin-left: 0 !important;
}
}

    Best regards,
    Rikard

    December 4, 2017 at 6:37 pm #884741
    skynandi

    Thank You, Rikard,

    It works, how can I apply for this to the whole site without specifying the Page ID?

    Also, how would the code look like for 1/4 and 1/2 elements?

    Thank You very much for your help.

    • This reply was modified 7 years ago by skynandi.
    December 5, 2017 at 11:39 am #884979
    Rikard

    Hi,

    So you want it for all 1/3 elements? If so then please try this:

    @media only screen and (max-width: 767px) {
.av_one_third {
    margin-left: 6% !important;
    width: 29.333333333333332% !important;
}

.av_one_third.first {
    margin-left: 0 !important;
}
}

    Let me know if that works first.

    Best regards,
    Rikard

    December 5, 2017 at 5:22 pm #885165
    skynandi

    Hi Rikard,

    This is great, exactly what I needed. Thank you.

    Can you tell me how would the code look like for the 1/2 element and the 1/4 elements?

    Thanks, again.

    December 6, 2017 at 8:54 am #885437
    Rikard

    Hi,

    You can try this out, though you might need to adjust the values a bit if you run into problems:

    @media only screen and (max-width: 767px) {
.av_one_half {
    margin-left: 6% !important;
    width: 47% !important;
}

.av_one_half.first {
    margin-left: 0 !important;
}
}

@media only screen and (max-width: 767px) {
.av_one_fourth {
    margin-left: 6% !important;
    width: 20.5% !important;
}

.av_one_fourth.first {
    margin-left: 0 !important;
}
}

    Best regards,
    Rikard

    • This reply was modified 7 years ago by Rikard.
    December 7, 2017 at 8:59 pm #886225
    skynandi

    Thank you, Rikard.

    These codes are very helpful.

    Nandor

    December 7, 2017 at 11:56 pm #886280
    Jordan Shannon

    Hi,

    Did you need further help, or shall we close this thread?

    Best regards,
    Jordan Shannon

    January 19, 2018 at 7:22 pm #899836
    skynandi

    Hi,

    Thank you for the fantastic support guys.

    The above code works great to keep the 1/3rd elements next to each other when resized to a smaller screen.

    I have a page with 3×3 sliders in 1/3rd elements with no space between them, but when I resize to a smaller screen there is a huge gap between them. Is there any way to keep them with no space just like on the desktop? ( link attached)

    Thanks again,

    January 21, 2018 at 6:54 am #900272
    Rikard

    Hi,

    Try adding this to your CSS:

    margin:0 !important;

    Best regards,
    Rikard

    January 25, 2018 at 6:11 pm #902937
    skynandi

    Hi Rikard,

    I’ve tried to apply this to the team page:

    @media only screen and (max-width: 767px) { .page.page-id-3076 .av_one_third {
    margin-left: 0 !important;
    }

    The gap disappears, between the 3 images next to each other but changes the Font weight on that page which is really weird,
    also, how do I get rid of the gap between the two rows?

    Thank You,

    January 25, 2018 at 10:57 pm #903068
    Nikko

    Hi,

    Can you try to double check the opening { and closing } some of it might not be closed. Hope this helps :)

    Best regards,
    Nikko

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