How to get 1/6 columns to work in responsive view? - Support

Tagged: columns, mobile, responsive

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
February 22, 2017 at 2:34 pm #750498

mofix
Participant

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

February 27, 2017 at 3:33 pm #752315
Yigit
Keymaster
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
February 27, 2017 at 3:44 pm #752323

mofix
Participant

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

February 27, 2017 at 5:02 pm #752371
Yigit
Keymaster
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
February 27, 2017 at 5:21 pm #752388

mofix
Participant

Fantastic!!! Thanks a lot Yigit!!

You can close this now.

Have a great day!

Regards, Mathilde

February 27, 2017 at 5:29 pm #752390

Yigit
Keymaster

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
Author

Posts

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.