Layout issues with my website

HTML-CSS
23

I’m on my iphone 7 and the footer icons are like this ( F) ( T) all at the right part of the white circle. Then the Rose logo image in the nav is Rose Pe
Estate Sa

24

However when I go onto Google Chromes dev tools and look at the phone screen sizes, it shows the footer icons working…so chrome’s stuff is not right.

25

This is what I get in my mobile,

chrome
chrome1080×1920 207 KB

1 Like
26

I see the bug with the social icons on iPhone, but not the overflow you are talking about.

3-iPhone-6s
3-iPhone-6s1024×768 64.9 KB

I wasn’t really able to test it much but you can try this.

Set the parent button container to position relative.

[class^="icon-btn"] {
  position: relative;
}

Then set either the <a> or the <i> child elements to position: absolute, and position them.

a.link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1 Like
28

If you see the shield icon Mixed Content Shield in the address bar and you’re having trouble with that website , please see Mixed content blocking . For kaspersky support number visit: https://kasperskysupportnumber.co.uk/install-reinstall-kaspersky/ for more information on this topic.

29

Hewlett Packard famous all over the world for electronic devices like desktops/laptop, printer and scanner.