Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 4, 2017 at 12:17 pm #834306
    prudsys

    Hi,

    I would love the 2-column content on our webiste (e.g. Homepage a bit further down) appear like mobile with 100% width and the two columns underneath each other. It works fine for the 3-column section above, but not for the 2-column-sections. What’s the best way to solve this issue?

    August 5, 2017 at 11:31 am #834710
    Rikard

    Hey prudsys,

    I’m not sure I understand what you are referring to, do you mean the section which starts off with “Viele Ziele – eine Lösung”?

    Best regards,
    Rikard

    August 7, 2017 at 9:12 am #835272
    prudsys

    Hi Rikard,

    there a “t” missing on table_t_ in my headline, sorry.
    Let me explain it again: Yes, I would like the section “Viele Ziele – eine Lösung” to be text above and image underneath on tablets – just like on mobile phones.

    Thanks in advance!
    Kati

    August 8, 2017 at 6:01 am #835679
    Rikard

    Hi,

    Thanks for the clarification. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 1024px) {
.home #borderbot .av_one_half {
    display:block !important;
    width: 100% !important;
}
}

    Best regards,
    Rikard

    August 8, 2017 at 8:02 am #835729
    prudsys

    Hi,

    it does half what I wanted :), maybe we get the other half working as well. When I delete .home it also works for the other pages, but only for some occurrences and not all. But most of all, it mixes up the background colors of the containers and does not keep them as they were supposed to be. It gets worse, the further down you scroll.

    Try one thing please: click on this image on the home page with the circles. When I apply the snippet to the theme, on the second page it works for the first section (not perfect for the padding left and right) but none of the sections a bit further down the page. Any idea?

    Thanks so much for your help.

    Regards,
    Kati

    August 9, 2017 at 5:46 am #836131
    Rikard

    Hi Kati,

    Ok, thanks for the feedback. The code I gave you should only apply to the particular element that you pointed out. If you want it to apply to the site in general then you would need something like this instead:

    @media only screen and (max-width: 1024px) {
.av_one_half {
    display:block !important;
    width: 100% !important;
}
}

    Best regards,
    Rikard

    August 10, 2017 at 9:58 am #836866
    prudsys

    Hi,
    it’s so much easier: I discovered the grid row option for setting the mobile breakpoint and set it to tablet and lower. Then just a few css fixes for indiivdual styles like padding and color – that’s it.

    Thanks,
    Kati

    August 11, 2017 at 6:29 am #837313
    Rikard

    Hi Kati,

    Great, glad you found that. It’s so new that I forgot about it too :D

    Best regards,
    Rikard

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