Problems with access to elements via css in tablet and smartphone versions

Hi Victoria,

thank you very much, that works fantastic.

I have 2 more problem-sites.

1. The “TEAM” site
I cant place and resize the 5 small images
I need that for the tablet portrait- and the smartphone versions

i’ve tried to place them on style.css, resize is impossible.

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

div#attachment_1768.wp-caption.alignleft {
margin-left: 94px;
}

/* Second Row */
div#attachment_1771.wp-caption.alignleft {
margin-left: 140px;
margin-right: 188px;
}

div#attachment_1762 {
margin-right: 60px;
}
}

that does’t work

2. The “HOME” site

I cant resize the image, on smartphone versions and cant set the margins of the dotted list.

Can you help me?

Best regards,

Mick

Hello,

o.k. i try it again, with some expilicit code questions, is that o.k. for you?

I built the home site new and want to do it with the team site as well. But the home site
first.

I removed the inline styles and put them to the style.css

That works for the full screen verson with (this has no resolution rules)

ul#homelist {
margin-left: 540px;
}

But in the tablet version i cant get access to it via css with

@media only screen and (max-device-width : 1024px) and (orientation : landscape) {
ul#homelist {
margin-left: 440px;
}
}

the same in lower resolutions.

Icant get access to the image and the imageframe via css in full screen version, so i cant resize it in lower
resolutions. Heres the code

div#attachment_1754.wp-caption.alignleft {
width: 200px;
}
.homeimage {
width: 190px;
}

Please answer me.

Best regards,

Mick

Hi Mike,

thanks for your very helpful reply.

I did it as you adviced, i modified your script with the media query orientations and put it in the quick css field.
It works well so far, i have access to all elements in tablet and smartphone versions, but the smartphone portrait
version still harms the tablet portrait version.

Heres the code for the portrait versions

@media only screen and (max-width: 1024px) and (orientation : portrait) {
ul#homelist {
margin-left: 20px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1762.wp-caption.alignleft {
margin: auto !important;
width: 128px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1765.wp-caption.alignleft {
margin: auto !important;
margin-left: 5px !important;
width: 128px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1768.wp-caption.alignleft {
margin: auto !important;
margin-left: 8px !important;
width: 128px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1771.wp-caption.alignleft {
margin: auto !important;
margin-left: 8px !important;
width: 128px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1374.wp-caption.alignright {
margin: auto !important;
margin-left: 6px !important;
width: 128px !important;
float: left !important;
}
}

The smartphone portrait is commented out actually. So it dont hit my tablet version.

/*@media only screen and (max-width: 768px) and (orientation : portrait) {
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1762.wp-caption.alignleft {
margin: auto !important;
width: 80px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1765.wp-caption.alignleft {
margin: auto !important;
margin-left: 5px !important;
width: 80px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1768.wp-caption.alignleft {
margin: auto !important;
margin-left: 5px !important;
width: 80px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1771.wp-caption.alignleft {
margin: auto !important;
margin-left: 5px !important;
width: 80px !important;
}
#top.page-id-22 #wrap_all #main .post-entry-22 div#attachment_1374.wp-caption.alignright {
margin: auto !important;
margin-left: 6px !important;
width: 80px !important;
float: left !important;
}
}*/

The smartphone landscape version is o.k and doesnt have any inluences to the tablet version
I cant find out why that doesnt work in portrait.

I send you an admin access, so you can see the code.

Best regards,

Mick

Hi Mike,

thank you for your reply.

That works not, It still influences the tablet version.

I added it to the quick css, but its the same problem.

Best regards,

Mick

Hi Mike,

how did you test the above css. On which place in the script?

Best regards,

Mick

Hi,

no i use the classic editor in source-code mode, sometimes in advanced-mode.

Best regards,

Mick

Hi,

o.k., i did that, but the last image jumps into the next row now, on all versions.

The last image is now set to alignleft.

Best regards,

Mick

Dear Mike,
first of all we would like to thank you to the max for your patience and your detailed and professional help.
Finally it’s done; everything works fine on tablet and smartphone in landscape and portrait mode.

Once again THANK YOU. Please be so kind and close this topic.

Best regards and all the best for the holidays, Yours
Mick