0

I know that this question has been asked before on this website, but none of the answers worked for me, so I'm going to ask it again.

I'm creating this website to be responsive and work on different viewports, and I THOUGHT I designed for mobile first by resizing my browser window and using media queries, but upon putting the site up on the server and seeing the mobile version on my galaxy s8, I realized it was all for nothing. Running the website (that is mostly styled with vh and vw units) on my google chrome app on my phone gives me a site that is about 75% of the size, where the only thing that takes up the full screen is the body background colour.

As an added bonus, only some of my images are showing up. I'll fix that later, but I'm adding it into this question just in case it can be used for a diagnosis.

So far, these are the closest thing to solutions I have found:

1. adding a meta tag

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=yes">

this does, in fact, the opposite of what I want it to do, it makes the whole page even smaller. It does allow all my images to show up though which is weird.

2. This fun little snippet

javascript

        let vh = window.innerHeight * 0.01;

document.documentElement.style.setProperty('--vh', `${vh}px`);
        let vw = window.innerWidth * 0.01;

document.documentElement.style.setProperty('--vw', `${vw}px`);

css

nav_box
{
height:calc(var(--vh, 1vh) * 100);
//this gets me what would usually be 100vh 
}

This one actually works really well and fixes my problem, but with it I don't have any way to address the absolute/ relatively positioned elements that I am shifting in pixels. It's also kind of labour-intensive, and I'd like to know if I'm missing something else. If this is my answer, I'll totally accept it, but if that's the case I need to find the equivalent of this for pixels.

Finally..

This is how I'm calling my stylesheet, right now my header has two links (this and a font) and one meta tag (see above)

<link rel="stylesheet" type="text/css" href="style.css">

I'd appreciate any help I can get. Thank you!

Emily Perkins
  • 1
  • Make sure your meta tag is placed in your head tag. Try this one instead: Also, when designing my first website I had a lot of the same problems. Read lots of documentation about responsive webpage building. Best advice I can give you that I used was try using percentages and if you have a lot of text try scaling it down. – MatthewSzurkowski Jun 11 '20 at 03:16
  • If you are using absolutely positioned element, moved around via pixel values you are not developing responsively. You should get rid of these elements entirely and build the site in a way that positiones elements in a way they are dependant on other elements. – cloned Jun 12 '20 at 06:44

0 Answers0