CODEWITHSUNDEEP
htmlcssmobile
theloosegoos
theloosegoos

Reputation: 129

HTML CSS mobile black magic

So I made a noob developers mistake and made the standard web page before the mobile version. So naturally when I open my Web page via mobile it's completely messed up. I can write a mobile css file and link it how ever I'm Wondering if anyone knows of any black magic html or css formating I can append to my files as a fix.

I've manipulated viewport contents Display width and @media but the solution eludes me.

Again I'm new but committed so thanks in advance.

Upvotes: 1

Views: 139

Answers (2)

Arnon
Arnon

Reputation: 2244

The easy way would be to move all your desktop-specific code into a min-width media query that looks like this:

@media screen and (min-width: 1000px)

Where 1000px is wherever your website needs to switch to mobile styling. This way, all your desktop CSS will be applied down to your first breakpoint. In this example, once you get below 1000px your desktop-specific CSS will stop being applied and your mobile CSS can take over.

Place your mobile CSS outside of all your media queries. Once the desktop CSS stops being applied, the browser will fall back to the "default" mobile CSS.

Upvotes: 1

Luke Shinn
Luke Shinn

Reputation: 346

You can configure your file by using this CSS

@media only screen and (max-width: 720px) {
    body {
        background-color: lightblue;
        margin: 0px;
    }
}

The 720px is the average size of most smartphones. You will need to add this meta tag to your html pages as well

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

Hope this helps

Upvotes: 2

Related Questions