CODEWITHSUNDEEP
htmlcssmobilescreen
user1820262
user1820262

Reputation:

How to target devices smaller than a certain screen size

I have a responsive web page that fits nicely down until 750px then it runs into trouble. It takes a lot of CSS to make it look good and it is a pretty hackish solution.

Is there a way so that if the browser size is smaller then 750px take them to a certain page with its own markup, styles etc??

Thanks, Jordan

Upvotes: 9

Views: 15654

Answers (4)

Krishna
Krishna

Reputation: 26

Screen Sizes:

640x480 800x600 1024x768 1280x1024 (and larger)

CSS media queries for screen sizes

Upvotes: 0

djk
djk

Reputation: 973

You can apply CSS to a certain device width only:

@media only screen and (max-width: 767px) {
    body { background-color: red; }
}

You can easily show and hide HTML areas that target one or another device. You could even do that with the whole site, even though loading times would suffer, because all devices load the markup of all other devices.

.phone-section { display: none }

@media only screen and (max-width: 767px) {
    .phone-section { display: block }
    .desktop-section { display: none }
}

Here are some more examples: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries.shtml

Upvotes: 0

SW4
SW4

Reputation: 71160

You can implement media queries

e.g:

@media all and (max-width: 750px) {
/* CSS rules here for screens lower than 750px */
}
@media all and (min-width: 750px) {
/* CSS rules here for screens above 750px */
}

Also see Introduction to media queries – Part 1: What are media queries - Adobe, Media queries - Wikipedia, the free encyclopedia and CSS3 Media Queries overview - CSS Media Queries

Upvotes: 16

Nitesh
Nitesh

Reputation: 15749

You need to Use Media Queries to get what you are looking for.

Refer the link to know more about it.

Upvotes: 0

Related Questions