Media query CSS not working for mobile and tablet image resize

Hi @victoriagreenphotography

You are trying to set only min width only by @media screen and (min-width: 500px) You can write your default CSS Like this.

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style> 

I hope It will help you.

Thankyou!

• This reply was modified 4 years, 5 months ago by Jan Dembowski. Reason: Formatting

Hello – thanks for sharing all those options. I am new to all of this. I have made a note of them.

Which CSS from the list is best for saying I want a smaller image on both tablets and mobiles?

Also, I have been in web inspector (I have a mac on safari) and I think the image with me on the homepage holding a camera is called ‘.DSC_0483’. Does that sound right to you? I hope I am looking in the right place on web inspector as it wasn’t obvious at all (unlike the youtube clips!)

Thanks for your help,

Victoria

@victoriagreenphotography AS per your requirement, I am write below For all tablets and mobile which will help you. maximum device width is 480px for mobile and apart of this maximum 1024px is the last maximum width of tablet view.

<style type=”text/css”>
@media only screen and (max-device-width: 480px) {
/* styles for mobile browsers smaller than 480px; (iPhone, Samsung And all type
of mobile it will cover ) */
}
</style>
In bottom it will cover all kind of tablets landscape, portrait type tablets
<style>
@media only screen and (device-width: 768px) {
/* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
</style>

I hope it will help you thanks

• This reply was modified 4 years, 5 months ago by Siddy.
• This reply was modified 4 years, 5 months ago by Siddy.

Ah thank you Sid – that makes perfect sense. Sorry I didn’t understand before.

Would you mind helping me out with identifying the image name (homepage image of me holding a camera) to use in the CSS as I have it as .DSC_0483 but think it might be wrong.

Thank you so much – really appreciate your help and expertise,

Victoria