CODEWITHSUNDEEP
htmlcss
Phil Young
Phil Young

Reputation: 11

How do I run one script for computer screen and another for mobile (HTML CSS)

I am building a single-page website for an application for a coding Boot-camp.

I have 2 HTML files and 2 CSS files as the content of the page is different depending on which device is being used (either mobile or laptop).

The four files are: "index.html" and "styles.css" and "mobile.html" and "mobile.css"

My aim is to have it so if the screen width is > 700px then it will run: "index.html" and "styles.css"

and if device size is < 700px it will run: "mobile.html" and "mobile.css"

I had added

@media only screen and (max-width 700px)

into the mobile.css file, but this just stopped all the CSS working.

How would I get the page to run the correct scripts at the correct time?

Upvotes: 0

Views: 594

Answers (1)

MaxCodes
MaxCodes

Reputation: 94

I think there is a small misunderstanding. You don't need two html files. What you do is you modify your ids and classes in your index.html to make it fit on mobile devices. The two CSS files are a good first step though.

Insert your CSS files like so:

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="mobile.css">

Make sure you insert your mobile.css after your styles.css so you want all your styles from styles.css but at some breakpoints modify some ids or classes with your mobile.css.

So to express it in natural language: Hey styles.css. I want you to style all my ids and classes but if mobile.css reaches a breakpoint, where it wants to modify eg. #menu-bar to have a green background, I use the modified styles in mobile.css instead.

Example:

styles.css

#menu-bar {
    width: 100%;
    background-color: red;
}

mobile.css

@media only screen and (max-width: 600px) {
    #menu-bar {
        background-color: green;
    }
}

Notice how I didn't declare the width again? This is because everything that was declared already in styles.css will stay the same. Just the values you alter in your mobile.css media query breakpoints will change.

Make sure to research media queries to get a better unserstanding of it eg. from this article

Upvotes: 1

Related Questions