Pictures loose size

[Jacob Vogt]

Hi
I am using your awsome Healing Touch theme on www.wildnisschule-auenland.at . I had to do some confiturations that it does exactly what I want it to.

Unfortunatly I am a beginner in CSS and I came to realize now that it looks greate if I look at it on my screen. But on small screens the pictures dont change proportional.

Can you help me fix that here I post all the code that I used to modyfy parts.

.nivo-caption{  
background-color: rgba(255,255,255,0.6);
border-radius: 25px;
padding: 20px;}
.widget-column-2{
width:20%;
}
div.event-description {
    background-color: #e6e6e6;
}	
.feature-box img {
    border: 0px solid transparent;
    height: 58px;
    margin-bottom: 25px;
    width: 70px;
}
.drname {background-color: rgba(255,255,255,0.4); width: 140px !important;}
.drexperience {background-color: rgba(255,255,255,0.4); width: 120px !important;}
.drdesc {background-color: rgba(255,255,255,0.4);color:  rgba(0,0,0,1);} 

This is my costume CSS, I dont know what makes sence her I just tried and error-ed around until it looked like i wanted it to look like.

Can you tell my what I have to do to make this universal? for any screen size? That my first page looks nice on small laptops too?

Greetings from Austria and a thank you because I really like the theme.

[Forum Moderator]

Hi Jacob,

Kindly go to Appearance>Theme Options>Basic Settings>Custom CSS box:
Add this css code in custom css box

@media screen and (max-width: 767px) {
.blog-post-repeat .post-thumb img {
float: none;
height: 100% !important;
margin-right: 0;
width: 100% !important;}
}

Regards,
Shri

[Author]

Posts