Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #750498

    Hi,
    I have a container/color section with 6 columns with circles and with css it works fine (fantastic) in desktop view. I’ve got this css code:

    #six-columns .column-top-margin { margin-top: 0px !important; }
    #six-columns div .av_one_fifth { width: 15%!important; margin-left: 2%; }
    #six-columns .first { margin-left: 0!important; clear: none; }
    #six-columns .el_after_av_one_fifth { margin-left: 2%!important; }
    #six-columns .container { width: 100% !important; max-width: 100%; padding-left: 75px; padding-right: 75px; margin: 0; }

    But it’s not working in responsive view, the columns remains on vertical line. You can see it and test at the url in private content, scroll down to Products section in grey with the circles. Please help.

    Thanks, kindly regards, Mathilde

    #752315

    Hey Mathilde,

    Sorry for the late reply!

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 1024px) and (min-width: 990px) {
    #six-columns h5 {
        font-size: 20px;
    }}
    @media only screen and (max-width: 768px) {
    #six-columns .flex_column {
        width: 50%!important;
        margin-left: 0!important;
    }}
    

    And then remove “!important” from following part of the your existing code

    #six-columns div .av_one_fifth { width: 15%!important; margin-left: 2%; }

    Best regards,
    Yigit

    #752323

    That’s okay Yigit!
    Great, thanks a lot! The only thing I would like is to have some padding between the two horizontal cicles in rows in responive mode that now is “glued together”. Is there any way to fix that?
    Kindly regards, Mathilde

    #752371

    Hey!

    Can you please change following part of the code

    @media only screen and (max-width: 768px) {
    #six-columns .flex_column {
        width: 50%!important;
        margin-left: 0!important;
    }}

    to following one

    @media only screen and (max-width: 768px) {
    #six-columns .flex_column {
        width: 48%!important;
        margin-left: 2%!important;
        margin-bottom: 2%!important;
    }}

    Regards,
    Yigit

    #752388

    Fantastic!!! Thanks a lot Yigit!!

    You can close this now.

    Have a great day!

    Regards, Mathilde

    #752390

    Hey!

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to get 1/6 columns to work in responsive view?’ is closed to new replies.