html - How to fix visual differences of responsive code in Safari and Chrome -


I'm currently learning responsible coding, but I think I have not been able to run into a small problem I can not understand I'm using the Bootstrap framework.

In working on a site, I realized that there may be some differences when considering the safari. Chrome looks as I did, but the header shift on the Safari horizontal orange bar is sitting on the top of the ANC, and at the center of the screen, the small vertical orange jumps in the center. Although it is only in large size all other window sizes look good

I tried to adjust margin and padding for large media queries but then it also affects it in Chrome and thus it How do I go about fixing this problem without affecting other browsers to offset?

The website is www.jennytaingdesign.com

and if the file is required, it can be downloaded

Any suggestions or answers will be highly appreciated Thanks!

There are some problems with your website:

  • Header The breadth of the fluid should be made, do not provide it with fixed width.

  • You do not have to use two logos for desktop and mobile instead, you can use a logo and you can adjust the img width as you want.

  • In the header, the following should be: Logo, Navbar and orange lines in your case, there are only logos in it.
  • You can create the desired effect of orange lines using a div with a specific height and: before the pseudo-element.
  • You don do not give margins to the ul menus in every breakpoints, you can provide it in the main CSS file and it will apply to the entire project.

I did a little work header and now it's like note # 3 here's the update code:

CSS: 

  header {status: relative; } Header Test {background: # ED6643; Width: 100%; Height: 5px; Display: Inline-block; } Header Test: {content: ""; Width: 5px; Status: Completed; Background: # ED6643; Left: 0; Top: 92px; Height: 100 pixels; }

Please find the link for the updated files

It now works on both Chrome and Safari.


Comments

Post a Comment