Mobile Help

td27

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?

Hikin' Mike

Can't help unless you post your site....

rht

@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).

rht

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.