Pictures on mobile too big, not responsive

Hi,

What do I have to do to have smaller pictures on mobile devices especially on smartphone? Please have a look at my homepage on http://www.happyworklife.de There you can see, that the posts and everthing else regarding to the theme (Newspaper 4) is responsive, but the 3 pictures I included (yellow one, grey one and for newsletter) are not responsive. Same problem on site with the 3 yellow pics and the pic with me: http://www.happyworklife.de/coaching

Can you help me or tell me how to make them responsive?

Thanks a lot!
Kathrin

Hi

You can modify the image size for mobile devices usng custom css in theme panel > custom css: http://screencast.com/t/cBB0QfDs – http://screencast.com/t/Qf8MewSQh

@media (max-width: 767px){
.page-id-155 .container-fluid .wpb_wrapper p a img, .page-id-383 .container-fluid .wpb_wrapper p a img, .page-id-383 .container-fluid .wpb_wrapper p img {
width: 230px;
height: 180px;
margin-left: auto;
margin-right: auto;
display: block;
}
}

You can modify the width and height as you like. Let me know how it goes!

Thanks!

Hi,

Thank you! I will try it.

2 questions before that:

– What means “.page-id-155” there? Is that only for page id 155 then?

– Same with .page-id-383. What means that id?

Hi

The css I provided above will be applied only on pages with id 155 and 383. I used those classes for a more specific target. For example if you have on page with id 156 an element with classes: .container-fluid .wpb_wrapper p a img the above css won’t affect it.

Thanks!

All right, thank you!

Do you know why my footer looks different on page and post?

I use only footer widget (footer 1 and footer 2), on pages it is correct. But on post and category sites, the text is on another position and the link colour is not yellow, it’s grey. In Theme Panel everything is correct. I enabled footer with 2 coloums, but the picture with text in footer 1 is not correct displayed. You can have a look here:

http://www.happyworklife.de (correct on page)

http://www.happyworklife.de/online-business/ (not correct. The text is not next to the picture and the link colour is grey)

Same problem here: http://www.happyworklife.de/online-business-kurs

Can you help me with that?

Hi

Try this custom css: http://screencast.com/t/e4cuaWgl1tRa

.single .alignleft, .archive .alignleft {
float: left;
margin-right: 23px;
margin-top: 6px;
margin-bottom: 6px;
}
.single p a, .archive p a{
border-bottom: 1.5px dotted #FFD700;
color: #FFD700;
}

Let me know how it goes!

Thanks!

It works 🙂 Thanks a lot!