Misalignment in the home page

Home Forums All Other Themes Misalignment in the home page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #94921
    Michael Surace
    Participant
    • Topics: 41
    • Replies: 47
    • Total: 88
    Member since: January 24, 2017

    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

    #94932
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23490
    • Total: 23490
    Member since: August 16, 2013

    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

    #95005
    Michael Surace
    Participant
    • Topics: 41
    • Replies: 47
    • Total: 88
    Member since: January 24, 2017

    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

    #95043
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23490
    • Total: 23490
    Member since: August 16, 2013

    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

    #96856
    Michael Surace
    Participant
    • Topics: 41
    • Replies: 47
    • Total: 88
    Member since: January 24, 2017

    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

    #96949
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23490
    • Total: 23490
    Member since: August 16, 2013

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.