I’m creating a simple webpage that just has a logo and buttons centered in the middle of the page. This is just a simple directory to our other sites and pages:
The issue I’m running into is that everything is too small when I view on my phone. I’m basically want the logo and buttons large enough on my phone so it resembles an app but also just normal-sized buttons on a desktop (even though there will be alot of white space around the buttons, which is fine).
I’ve been trying to use a number of things including the @media only rule sized for desktop and smaller when viewed on a phone and vice versa.
Does anyone know what CSS I can use to get this to work?
Page:
https://flotronicsautomation.com/flotronics-links-page.html
Current CSS:
https://flotronicsautomation.com/css/faci-styles.css
Flotronics is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
The solution is actually in HTML, not CSS. Add this line into the <head> section of your HTML. Read more about it here.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This statement declares that your site has been mobile-optimised. Without it, mobile browsers treat your site as a desktop site, with a much wider viewport and everything zoomed way out.