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

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

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