Return to previous page

Columns in desktop vs. mobile view - by designerobot

This topic has 10 replies, 2 voices, and was last updated 6 years, 11 months ago ago by Rose Tyler

designerobot

Participant

January 17, 2018 at 17:00

Hello,

I have some columns with pictures in various pages. They look as I want in the desktop version (two, three, four, five or six columns) but they become only one column in the mobile view. It is not nice and useful.

Why the template changes in this way? Could I keep the same number of columns also in the mobile view?
For example when I’ve:
– two columns in desktop, two also in mobile
– three columns in desktop, three also in mobile
– four columns in desktop, maybe two in mobile (if four are too much)
– six columns in desktop, maybe two or three in mobile (because six are surely too much on a small display)

What do I need to insert in my custom CSS to do this?

Please, contact administrator
for this information.

#182164 Copied

9 Answers

Rose Tyler

Support staff

January 18, 2018 at 08:56

Hello,

Thanks for the topic.
Please provide in Private Content area links to pages where you want to set 2 columns on mobile.

Regards

#182191 Copied

designerobot

Participant

January 18, 2018 at 12:19

Hello, almost every page have these type of columns.
I need a script that works on the entire website.
As described above (2>2, 3>3, 4>4 or 2, 6>3 or 2).
I think it’s enouh clear if you see the website. You already have the access data.

#182223 Copied
Rose Tyler

Support staff

January 18, 2018 at 13:43
Hello,

You may add a custom class for every rows, columns of which you want to change on mobile, http://prntscr.com/i25pks et-mobile-columns
and add this code in Theme Options > Custom css > Global Custom css:
```
@media only screen and (max-width: 768px) {
    .et-mobile-columns .vc_col-sm-4 {
        width: 33.33%;
        float:  left;
    }
    .et-mobile-columns .vc_col-sm-3,
    .et-mobile-columns .vc_col-sm-2,
    .et-mobile-columns .vc_col-sm-6 {
        width: 50%;
        float: left;
    }
}
```
OR
use responsive options of columns http://prntscr.com/i25r0u
https://wpbakery.com/video-academy/responsive-column-control-width-offset-param-usage-explained/

Regards
#182231 Copied
designerobot

Participant

January 18, 2018 at 16:08

Thank you very much!

The last question, in the home page I’ve the sidebar that now is 25% at full view of the width. Could I set it to 20% like it is now in smaller view?

#182244 Copied

Rose Tyler

Support staff

January 18, 2018 at 16:13

You’re welcome!
You may change sidebar width in Settings of page > Page Layout > http://prntscr.com/i285xd

Regards

#182245 Copied

designerobot

Participant

January 18, 2018 at 16:27

Thanks.

Unfortunately, 1/5 (namely 20%) doesn’t exist. I’ll continue to use 1/4 at this point.

Regards,

#182248 Copied

Rose Tyler

Support staff

January 18, 2018 at 16:33

Feel free to ask if you have any other questions.

Regards

#182249 Copied

designerobot

Participant

January 18, 2018 at 17:31

You are very kindly Rose.

If possible I would have another question. I’ve some lines (used to divide blocks) that are made always in the same way.

But sometimes (for example in homepage where there is written “I nostri settori”) something is wrong… the title is not on the right (as it should be) but in the center, with the red line also on the right, instead to be only on the left.

Please see the screenshot in pvt to better understand the problem.

Please, contact administrator
for this information.

#182259 Copied
Rose Tyler

Support staff

January 19, 2018 at 10:01
Hello,

This is the default behavior of this VC element, but you may use this code in Theme Options > Custom css for mobile:
```
.vc_separator h4 {
    text-align:  left;
}
.vc_separator.vc_separator_align_left .vc_sep_holder.vc_sep_holder_l {
    display: none !important;
}
```
Regards
#182322 Copied
Viewing 10 results - 1 through 10 (of 10 total)