Different margin in left and right list section

7gpseven7 · November 2016

In a list item i created one section with 2 wrap inside (1/2+1/2) with different bg colour. Inside each wrap there is a column section (screenshot 1)

In front end, responsive mode on and iPad mobile version the result is this one

The left side is ok but the right one (no different settings) i have this problem. i want to have the same space beetwen image and text (like in the left side) and to do that i created a new class list_right1 in shortcodes.css and in responsive.css to be used in this way:
LEFT SIDE -> list_right: margin_left:50px; margin_right:100px;
RIGHT SIDE -> list_right1: margin_left:100px; margin_right:50px;
How can i do to assign this class to the right column?

Albert · November 2016

Hi,

please send us link to page where you got this issue so we can have a look on it.

7gpseven7 · November 2016

Thank you, you can take a look at http://bit.ly/2gfyHyi

7gpseven7 · November 2016

The problem is in iPad version

Albert · November 2016

Ok, thanks. As we can see, there is a difference between the left and right side in code. Right margin for list_right is much larger. To decrease this margin on some devices, please use the following css:

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .align_right .list_item .list_right { margin-right: 50px !important; }
}

7gpseven7 · November 2016

Thanks for the reply! This solution sound quite good, can you tell me what to do to INCREASE the margin for the right side instead of decrease the left one?
I want that the right side look like the left

7gpseven7 · November 2016

I found the solution with the code

@media only screen and (min-width: 768px) and (max-width: 959px) {

.align_left .list_item .list_right { margin-left: 100px; margin-right: 50px !important; }

}
Thanks a lot

Albert · November 2016

Ok, great!

Different margin in left and right list section

Comments