Misalignment in the home page

[Michael Surace]

Hi all,

on my webiste http://www.toursinfirenze.com with GIRLIE PRO theme, the Section 1 (our product) in the home page displays misalignment between pages. The pages in section 1 must be 3 each rows, but in some is 2, in other 3 pages..there is not allignment.

Can you help me?

thanks

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

#familytour #products-box:nth-child(3n+3) { margin-right: 0 !important;}
#products-box.last { margin-right: 30px !important;}
#productdescbg { min-height:270px;}

Regards,
Chris

[Michael Surace]

Hi, a little bit more good, but there are still some misalignment problem, please see here: https://imgur.com/a/Lpd9B

on the first row, second image and third image are too close
on the second row, there are different spaces between the images

waiting for your feedback, thank you very much

Mike

[Sonl Sinha]

Hi,

Kindly go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

Remove

#familytour #products-box:nth-child(3n+3) { margin-right: 0 !important;}
#products-box.last { margin-right: 30px !important;}
#productdescbg { min-height:270px;}

And add this new css there

#products-box { width:30%; margin:0 15px 30px 15px;}
#products-box.last { margin-right: 15px !important;}
#familytour #products-box:nth-child(3n+3) { margin-right: 15px !important;}
#productdescbg { min-height: 270px !important;}

Regards,
Chris

[Michael Surace]

Hi again,

on the desktop version is now ok. But if you see in the mobile version, please see here https://imgur.com/a/QVRwR there is a big misalignment, you see a very long column of the single section 1 page (our product).

Could you help me to reallign section 1 for mobile version?

thank you

[Sonl Sinha]

Hi,

You can go to Appearance >> Theme Options >> Basic Settings >> Custom CSS Box:

Add this code there:

@media screen and (max-width:479px) {
#products-box { width: 100%; margin: 0 15px 30px 0;}
}

@media screen and ( min-width:480px) and (max-width:767px) {
#products-box { width: 43%; float: left !important;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
#products-box { margin: 0 11px 30px 11px;}
}

Regards,
Chris

[Author]

Posts