42970

css is different for chrome and firefox in mobile

Question:

I am working with wordpress Sydney theme, and I am trying to make a responsive website, I realized that it shows different css on different browsers.

here is an example: chrome<a href="https://i.stack.imgur.com/yVIH0.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/yVIH0.jpg" data-original="https://i.stack.imgur.com/yVIH0.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a> firefox: <a href="https://i.stack.imgur.com/WFevA.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/WFevA.jpg" data-original="https://i.stack.imgur.com/WFevA.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

here is with chrome again when I try to check the responsiveness: <a href="https://i.stack.imgur.com/7ltex.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/7ltex.png" data-original="https://i.stack.imgur.com/7ltex.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

here is with chrome on a different computer[*] this is how it should look like everywhere: <a href="https://i.stack.imgur.com/S9tjQ.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/S9tjQ.jpg" data-original="https://i.stack.imgur.com/S9tjQ.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

and here is with edge: <a href="https://i.stack.imgur.com/pXFWP.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/pXFWP.jpg" data-original="https://i.stack.imgur.com/pXFWP.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

i am not sure what is causing this to happen, the website is haagsehof.nl.

I have made some custom css for different devices like this for the responsiveness:

@media (min-width:767px){ } @media (max-width:766px) and (min-width:400px) { } @media only screen and (max-width: 399px) { }

how can make all the browsers in different devices all use the same css format so the website looks alike in every platform?

Answer1:

I don't know to go about this in wordpress, but in general the following applies.

You would have to add code for everything that doesn't work in a specific browser. So you might have to use -moz- or -webkit- and than just add the code. It's quite annoying that browser have different default values and sometimes even need prefixes.

Answer2:

As well as what @René Steeman said, some Wordpress themes will not allow you to access the CSS file. I would check and make sure you are able to do this first otherwise choosing a different theme may be the easiest way to fix this in all honesty.If you can access the CSS Rene is right. You can change how things look for each browser. Finally you may want to reference this list: <a href="https://www.w3schools.com/cssref/css3_browsersupport.asp" rel="nofollow">https://www.w3schools.com/cssref/css3_browsersupport.asp</a>. Not all CSS features are able to be used on each browser. On top of all of this your browser may need to be updated as well. Best of luck!

Recommend

  • Scan text and check whether it contains word from specified list
  • Unexpected characters returned when reading email using ImapX
  • hashmap in android xml parsing
  • Saxon9HE error XLM0001: Too many nested apply-templates calls. The stylesheet may be looping
  • create new column that compares across rows in pandas dataframe
  • PhoneGap build + jquerymobile: onclick on button does not work
  • .each() method only applies to first element in IE
  • FFMpeg: CFLAGS=-D__STDC_CONSTANT_MACROS ./configure where?
  • How to embed private Objective-C framework into iOS app on Xcode 6 with workspaces
  • How is a h264 idea bitstream organized? / header start codes
  • BackgroundMediaPlayer set Uri source of Media library item
  • how to force the use of cmov in gcc and VS
  • How can I compose a WCF contract out of multiple interfaces?
  • ResponseBuilder is not working when used with entity object
  • Is it possible to control programs with Javascript?
  • is this code truly private? (python)
  • Xamarin iOS debugger not hitting breakpoints
  • How many View Controllers should I have in my game?
  • Changing references to deprecated methods C++
  • How do I formally document a C# Attribute in UML?
  • How to print columns containing value
  • D3 get axis values on zoom event
  • Adjust width of select element according to selected option's width
  • C: Incompatible pointer type initializing
  • azure media services - The request body is too large and exceeds the maximum permissible limit
  • Custom validator control occupying space even though display set to dynamic
  • JSON response opens as a file, but I can't access it with JavaScript
  • Change multiple background-images with jQuery
  • Projection media query: browser support and workarounds?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • How to show dropdown in excel using jrxml (jasper api)?
  • Redux, normalised entities and lodash merge
  • How to get next/previous record number?
  • WOWZA + RTMP + HTML5 Playback?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • How get height of the a view with gone visibility and height defined as wrap_content in xml?
  • how does django model after text[] in postgresql [duplicate]
  • apache spark aggregate function using min value
  • python draw pie shapes with colour filled