I created a page in two column layout and I wanted to give it more space between columns, so I used [one_half style=”width:46%; margin-right:8%”] on first column and [one_half style=”width:46%”] one the second one. It looks ok in desktop view but it makes total mess in mobile view.

Then I tried using grids: grid5-grid2-grid5 and it works fine, but the space between columns is too large.

Is there any way around this problem? I need this space to be 8% of page width in desktop view but not mess the mobile view at the same time.

The problematic page:
https://www.corporate-photography.eu/oferta/

Thanks in advance.

Pawel

Unfortunately if you use the style="" attribute to add inline styles they will have the highest priority and will override the styles set for smaller screens as well.

We recommend to use the css_class="" attribute and add two classes, one on each column and then either use the “Custom CSS” field in Theme Options or use a child theme to style the two classes accordingly.

When adding the css for the classes, please use media queries to address the style to a specific screen width only (https://webdesignerwall.com/tutorials/css3-media-queries or https://css-tricks.com/css-media-queries/).

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market