Printable Version of Topic

Posted by: IPBR21054 Oct 27 2023, 04:27 PM

Evening,
I have learning difficulties but once guided I can normally take it from there.
It’s the starting I have issues with.

This is my first post so here goes.
This is the site in question https://www.theremotedoctor.co.uk/exmoor.html

I’m happy with the look etc on my Pc but stuck when it comes to being responsive for mobiles & iPads etc.

Please can you assist with the code needed for my css file.
I can then look & what it does & experiment with it.


Many Thanks.

Posted by: coothead Oct 27 2023, 05:04 PM

Hi there IPBR21054,

the page is definitely responsive.

In "Firefox" click > Tools > Browser Tools > Responsive Design Mode
to test my assertion.

There is probably something similar to use in "Google Chrome".

Of course, just decreasing the browser width will also indicate it's responsiveness.

Posted by: IPBR21054 Oct 27 2023, 05:10 PM

Maybe I should say Media Queries

Posted by: coothead Oct 27 2023, 05:20 PM

QUOTE(IPBR21054 @ Oct 27 2023, 11:10 PM)

There is absolutely no need for Media Queries for the page in question.

It is totally responsive to all page widths.

Posted by: IPBR21054 Oct 28 2023, 04:09 AM

Not on iphone or ipads.
Its to small so need to check what screen size the user has then show the page to suit.

Posted by: IPBR21054 Oct 28 2023, 04:58 AM

Using my attemped Media Query below i am able to resize the screen size & see it change & working for RED & PINK but there is no change for YELLOW & LIME.
The code is just an attempt test to have it change so i know im on the right track.

Do you see an issue.
Please advise Thanks

[code]/* ----------- iPhone 6+, 7+ and 8+ ----------- */
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
body {
background-color: #FFFF00; /* YELLOW */
font: normal 1em / 1.5 sans-serif;
}
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
body {
background-color: #00FF00; /* LIME */
font: normal 1em / 1.5 sans-serif;
}
}
/* ----------- iPad 1, 2, Mini and Air ----------- */
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 1) {
body {
background-color: #FF0000; /* RED */
font: normal 1em / 1.5 sans-serif;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 1) {
body {
background-color: #FF1493; /* PINK */
font: normal 1em / 1.5 sans-serif;
}
}

Posted by: coothead Oct 28 2023, 05:17 AM

QUOTE(IPBR21054 @ Oct 28 2023, 10:09 AM)

OK, I see what you mean.

I will look into it in the fullness of time.