Elements behaving differently on mobile device than on desktop

[Jeanette94]

Hello,

My site has been out for some time now and I didn't notice this problem until now.
When viewing my site on desktop and resizing the browser to the size of a mobile device everything looks great,
but when viewing my site on an actual mobile device some of the elements changes size and position.
Could I be doing something wrong? All help is much appreciated. My website is Esigaretten | Forhandler av elektroniske sigaretter

[mlseim]

I see no differences.
Tell us what exactly changes that is not the same.

[Jeanette94]

I managed to fix some of the issues, but if you have any kind of an tablet you can see that the Page Plugin from Facebook drastically shrinks in size from desktop to tablet.

[Andrew Skyler]

You can use the tool: Google Speed Insight, add your site and follow the instruction
It help me very much to optimize my site on phone and also the website
Reply me if it work

[Jeanette94]

I will try that when I get control over the elements on my page

[mlseim]

When I view your HTML source, I see 2 sizes for the facebook widget ... as shown here:

<div id="wb_JavaScript7">
<div class="fb-page" data-href="https://www.facebook.com/estaresigaretter/" data-width="500" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/estaresigaretter/"><a href="https://www.facebook.com/estaresigar...te></div></div>
</div>
<div id="wb_JavaScript6">
<div class="fb-page" data-href="https://www.facebook.com/estaresigaretter/" data-width="280" data-height="250" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/estaresigaretter/"><a href="https://www.facebook.com/estaresigar...te></div></div>
</div>

[/code]

So which one is picked is determined by a CSS file that switches them on a certain screen width. I'm guessing there is a mis-match somewhere on when these switch. Or don't use a fixed size, but use a percent of screen width.

[Jeanette94]

I use @media only screen where JavaScript6 belong to breakpoints 993px and 1024 px and where JavaScript7 belongs to breakpoint 768px. The weird thing is that it shows up corrent with a 768px display on a desktop, but not on a tablet.

[mlseim]

I wonder if you are getting your @media "max" and "min" wrong ... and specifically if you are not getting the widths correct for the device ... I know for sure that the whole @media thing is not intuitive. I get it wrong all the time.

See this: https://medium.freecodecamp.com/the-...s-88d6a5ba1862

View the author's working test site using your tablet:
https://codepen.io/davidgilbertson/pen/aBpJzO

Now flip your tablet device portrait and landscape and see what it shows.

[sxopeconsolidates]

First of you check your site in online responsive tools and solve the issue if you found.

[Jeanette94]

In all the responsive web design testers I've tried it shows up correct
and on tablets everything looks like it should except for the Page Plugin.