Different layouts between Browsers

  • wcushen

    (@wcushen)


    9 years, 3 months ago

    Hi,

    On my About Us page (http://www.tripcandy.com.au/about-us/) there seems to be some discrepancies in the page’s layout between different browsers. It looks fine on Chrome, however on Firefox and Safari there is a gap between the Social Media buttons and the Copyright line. Also, the Nav menu bar is positioned differently (in the white div of the text) in Mobile view. Why is that so?

    Any help would be greatly appreciated!

    Many thanks,
    W

Viewing 3 replies - 1 through 3 (of 3 total)
  • Kharis Sulistiyono

    (@kharisblank)

    9 years, 3 months ago

    Hello there,

    > on Firefox and Safari there is a gap between the Social Media buttons and the Copyright line.

    To fix it, try adding the following custom CSS code through the Simple Custom CSS plugin or child theme’s style.css.

    #pg-5-2 > div{
  margin-bottom: -1px;
}

    If you have been running WordPress 4.7, you can do it through Appearance > Customize > Additional CSS.

    > Also, the Nav menu bar is positioned differently (in the white div of the text) in Mobile view. Why is that so?

    Could you please take a screenshot illustrating that issue? You can post it into the free file hosting service like Google Drive then share its link here.

    Regards,
    Kharis

    Thread Starter wcushen

    (@wcushen)

    9 years, 3 months ago

    Thank you so much Kharis! That’s worked perfectly.

    As for the Nav bar issue, well it depends on the device I’m using. On my Nexus 5X, it appears within the white div of the About Us section, whereas on my friends’ iPhone the issue does not appear. Does it work ok for you when you shrink the browser on your devices? Just wondering.

    Many thanks,
    W

    Kharis Sulistiyono

    (@kharisblank)

    9 years, 3 months ago

    Hello there,

    It appears the row ID is changed. Try this code: 

    
#pg-2-3 > div{
  position: relative;
}

#pg-2-3 > div:after{
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1px solid #00;
  position: absolute;
  bottom: -1px;
}

    Doesn’t it work for you?

    [code updated]

    Regards,
    Kharis

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Different layouts between Browsers’ is closed to new replies.