Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Jun 2017
    Posts
    6
    Member #
    56860

    Elements behaving differently on mobile device than on desktop

    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

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    I see no differences.
    Tell us what exactly changes that is not the same.


  4. #3
    Junior Member
    Join Date
    Jun 2017
    Posts
    6
    Member #
    56860
    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.

  5. #4
    Junior Member
    Join Date
    Jun 2017
    Posts
    26
    Member #
    56748
    Liked
    5 times
    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

  6. #5
    Junior Member
    Join Date
    Jun 2017
    Posts
    6
    Member #
    56860
    I will try that when I get control over the elements on my page

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    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.


  8. #7
    Junior Member
    Join Date
    Jun 2017
    Posts
    6
    Member #
    56860
    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.

  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    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.
    Last edited by mlseim; Jun 22nd, 2017 at 08:14 PM.


  10. #9
    Junior Member
    Join Date
    Jun 2017
    Location
    Rajkot
    Posts
    3
    Member #
    56867
    First of you check your site in online responsive tools and solve the issue if you found.

  11. #10
    Junior Member
    Join Date
    Jun 2017
    Posts
    6
    Member #
    56860
    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.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:52 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com