Assistance needed please for responsive site Options

[IPBR21054]

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.

[coothead]

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.

coothead

[IPBR21054]

Maybe I should say Media Queries

[coothead]

Maybe I should say Media Queries

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

It is totally responsive to all page widths.

coothead

[IPBR21054]

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

This post has been edited by IPBR21054: Oct 28 2023, 04:09 AM

[IPBR21054]

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;
}
}

[coothead]

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

OK, I see what you mean.

I will look into it in the fullness of time.

coothead