Control images on smartphone resolution with css - Support | Kriesi.at

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
December 2, 2020 at 2:09 pm #1264498

thauermediaconsult
Participant

Hi there,

i want to set gallery-image sizes and margins.

On desktop and tablet-versions it works very well with

@media only screen and (max-device-width : 1024px) and (orientation : landscape) {
div#attachment_1765.wp-caption.alignleft {
margin-left: 120px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: 120px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 0 !important;
}
}

and

@media only screen and (max-device-width : 1024px) and (orientation : portrait) {
div#attachment_1765.wp-caption.alignleft {
margin-left: -8px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: -8px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 0 !important;
}
}

But if i put the same code into the media-query-block, to control the images for
smartphone versions, it overwrites my tablet versions. Whats wrong with these blocks?

@media only screen and (max-device-width : 768px) and (orientation : landscape) {
…
}

and

@media only screen and (max-device-width : 768px) and (orientation : portrait) {
…
}

Best regards,

Linda

December 3, 2020 at 7:49 am #1264690

Rikard
Keymaster

Hey Linda,

I can’t see your CSS applying on the actual site, could you try to explain a bit further what you are trying to achieve please?

Best regards,
Rikard

December 3, 2020 at 1:38 pm #1264768

thauermediaconsult
Participant

Hi Rikard,

the problem is that the version for desktop and tablet-resolutions are ready and now i want
to align just a list on the “home” site and some gallery images on the “team” site for the
smartphone.

The list and the images are aligned in style.css for tablets with this code, this works well.

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Home list */
ul#homelist {
margin-left: 450px !important;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
margin-left: 120px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: 120px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 0 !important;
}
}

and

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Home list */
ul#homelist {
margin-left: 20px !important;
}
li.li-one {
margin-left: 350px;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
margin-left: -8px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: -8px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 0 !important;
}
}

and now i want to align the list and adjust and resize the images for smartphones, i tried it with that

@media only screen and (min-device-width : 320px) and (max-device-width : 768px) and (orientation : landscape) {
/* Home list */
ul#homelist {
margin-left: 10px !important;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
width: 100px;
}
div#attachment_1765.wp-caption.alignleft {
margin-left: 200px;
width: 100px;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: 0;
width: 100px;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 200px;
width: 100px;
}
div#attachment_1374.wp-caption.alignleft {
margin: auto;
width: 100px;
}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 768px) and (orientation : portrait) {
/* Home list */
ul#homelist {
margin-left: 10px !important;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
margin: auto;
width: 100px;
}
div#attachment_1765.wp-caption.alignleft {
margin: auto;
width: 100px;
}
div#attachment_1768.wp-caption.alignleft {
margin: auto;
width: 100px;
}
div#attachment_1771.wp-caption.alignleft {
margin: auto;
width: 100px;
}
div#attachment_1374.wp-caption.alignleft {
margin: auto
width: 100px;
}
}

if i use that code it overwrites my tablet values and hits the layout of the list
and the images but the elements for smartphones are unrulable.
I tried it with 767 max-width but both doesnt work.
This code is now in so you can see.

Can you help me?

Best regards

Linda

December 4, 2020 at 12:41 pm #1264985

thauermediaconsult
Participant

Dear Rikard,
have you found a solution for our problem described in the last message?
We are working on that for quite a while now and need a solution for our client urgently.
Please be so kind and give us an answer asap.
Thank you
Linda

December 4, 2020 at 1:07 pm #1264994

Rikard
Keymaster

Hi,

Thanks for the update. You need to be able to inspect your site in the browser to be able to find out why your CSS is not applying. Like in this case: https://imgur.com/a/3epfkyB. The CSS is there, but you need to use !important after your arguments.

Best regards,
Rikard

December 4, 2020 at 2:18 pm #1265013

thauermediaconsult
Participant

Hi Rikard,

i did it as you adviced. Heres the new code.

@media only screen and (min-device-width : 320px) and (max-device-width : 768px) and (orientation : landscape) {
/* Home list */
ul#homelist {
margin-left: 10px !important;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
width: 100px !important;
}
div#attachment_1765.wp-caption.alignleft {
margin-left: 200px !important;
width: 100px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin-left: 0 !important;
width: 100px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin-left: 200px !important;
width: 100px !important;
}
div#attachment_1374.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
}

and

@media only screen and (min-device-width : 320px) and (max-device-width : 768px) and (orientation : portrait) {
/* Home list */
ul#homelist {
margin-left: 20px !important;
}
/* Team images */
div#attachment_1765.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
div#attachment_1765.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
div#attachment_1768.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
div#attachment_1771.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
div#attachment_1374.wp-caption.alignleft {
margin: auto !important;
width: 100px !important;
}
}

but, it still harms the tablet version as before. Normally that couldn’t
happen, why has the code in the smartphone media-query-block
influences to the tablet blcck? I cant find an anwer. Can you help me
further?

Best regards,

Linda

December 6, 2020 at 5:32 am #1265231
Rikard
Keymaster
Hi,

I can’t see your tablet CSS applying at all, could you try a more general media query to see if that helps?
```
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  Your tablet CSS goes here
}
```
Best regards,
Rikard
December 7, 2020 at 1:48 pm #1265474

thauermediaconsult
Participant

Hi Rikard,

the tablet css applies, i can rule the elements and it works.

But if i change the smartphone css values it hits my tablet layout.
Normally thats impossible if the media query is correct. There must be
the mistake. but i cant find it.

Best regards,

Linda

December 8, 2020 at 6:34 am #1265690

Rikard
Keymaster

Hi,

Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply. Also please point out a specific piece of CSS which is applying outside its media query range.

Best regards,
Rikard

December 11, 2020 at 8:54 pm #1266666

thauermediaconsult
Participant

Hi Rikard,
thanks for your help. Meanwhile we have found a solution for the problem. Please be so kind and close this topic.

Best regards and thanks once again

Linda

December 11, 2020 at 9:59 pm #1266674

Victoria
Inactive Moderator

Hi Linda,

Great :)

We are closing the thread.

If you need further assistance please let us know in a new one.

Best regards,
Victoria
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Control images on smartphone resolution with css’ is closed to new replies.