Mobile Help

td27td27 Registered Users Posts: 1 Beginner grinner
edited April 2, 2024 in SmugMug Customization
Hello! I recently got my site all setup, which looks good on desktop but when I view it on mobile it seems a bit off. I have a logo on the center with a button below it to view photos. When I view it in mobile the logo is shrunk a bit due to the auto width&height (I’m fine with this as it looks good) but the button below it is still massive and leaves a big gap between the two compared to desktop due to the buttons size. Is their any CSS code I can use to resize it?
Tagged:

Comments

  • rhtrht Registered Users Posts: 39 Big grins
    edited April 5, 2024

    @td27 said:
    Hello! I recently got my site all setup, which looks good on desktop but when I view it on mobile it seems a bit off. I have a logo on the center with a button below it to view photos. When I view it in mobile the logo is shrunk a bit due to the auto width&height (I’m fine with this as it looks good) but the button below it is still massive and leaves a big gap between the two compared to desktop due to the buttons size. Is their any CSS code I can use to resize it?

    Without the site I can't say specifics, but you use css media queries:

    https://www.w3schools.com/cssref/css3_pr_mediaquery.php

    You should be checking on the following devices:

    1. Ultra-wide desktop monitor
    2. Normal desktop monitor
    3. Tablet
    4. Mobile browsers

    You can probably just use a simulator to do the 3 and 4 (or just resize your desktop browser down). You just want to be checking the break points to make sure your site is resizing correctly on each device. You might need to make multiple rules to cover the different resolutions.

    Checking ultrawide screen resolutions is important because they can sometimes result images being heavily stretched or if you are using specific things object-fit:cover then you might find images with sections chopped off (eg heads of people cropped out).

    w: Reheat Images
    Torn between cycling and photography!
  • rhtrht Registered Users Posts: 39 Big grins
    edited April 5, 2024

    https://www.w3schools.com/cssref/css3_pr_mediaquery.php

    See the above - you need to set break points using the @media to define how things display on different devices.

    Check against:

    1. Ultra wide desktop monitor
    2. Normal desktop monitor
    3. Tablets
    4. Mobiles

    Also watch for how images display if you are using object-fit:cover CSS customisation, you can end up in some cases with the top and bottom of the image chopped off.

    Resize your browser down to see how it resizes. Sometimes you might just simplify the display of things for mobile because you have lower resolution and you have swipe and tap gestures instead of mouse clicks. Tablet usually looks about the same as desktop but you interact with swipe and tap gestures.

    w: Reheat Images
    Torn between cycling and photography!
Sign In or Register to comment.