RobDan16

Sorry Ahir, I can’t see where the closed bracket should go. It looks like it is there already.

Below is the CSS code you sent through, which is now in my site. I have also pasted the MENU code above it to show where it appears.

Everything looks the same as what you sent through, but images still stretched.

I can’t see what I’m missing out. And to save changes I only need to click on Update File at the bottom of the Edit Themes page?

Thanks, Rob

/*—————————— MENU ——————————*/
.menusearch {
margin-right:20px;
margin-top:55px;
}
#secondarymenu-container {
padding-top:0px;
}
#secondarymenu {
clear:both;
}
#secondarymenu li {
padding:15px;
}
#secondarymenu li a{
color:#fff !important;
font-size:15px;
}

#mainmenu-container {
clear:both;
background:#231f20;
}
#mainmenu li {
padding:0;
float:left;
}
#mainmenu a {
color:#fff;
text-decoration:none;
font-size:19px;
padding:3px 15px 5px !important;
display:block;
font-family:’oswald’;
}
#footer .footer_txt .container {
padding-left:20px !important;
}
}

/* -==========================- MOBILE -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
#content .container{
background:#fff !important;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}
.menusearch {padding:13px 0;margin-top:28px;}
#header {

}
#logo {
}
.searchbtn {
width:auto !important;
}
#secondarymenu-container {
}
#secondarymenu, #mainmenu {
background:#fff;
padding:0 2%;
margin-top:10px;
}
#secondarymenu li, #mainmenu li {
border-top:1px solid #d7d7d7;
}
#secondarymenu li a, #mainmenu li a{
color:#363636;
text-decoration:none;
}
.fp-next, .fp-prev {
margin:0 -5px;
}
.footer-widgets .widgetf:first-child {
border:none;
}

#footer {
width:100%;
}
.widgetf {
border-top:1px solid #d3d3d3;
}
.articles .post-date {
float:none;
}
.articles dt p img {
display:none;
}
.fp-nav {
bottom:-18px;
}
.slider-container {
padding-bottom:20px;
}
#s {
width:70%;
}
}
img {
max-width: 100%;
height: auto;
}

Thanks for this, Ahir.

Unfortunately, having copied and pasted this in, my images are still stretched and distorted.

Unfortunately, this has now made my images on tablet much smaller (though in the correct ratio). Do you know the default code so I can change it back (I didn’t screenshot the original code, which is my mistake).

My image problem is on PC. Is there anything I can change in the below CSS to fix images on PC?

/* -==========================- DESKTOP -==========================- */
@media only screen and (min-width:240px) and (max-width:639px) {
#content .container{
background:#fff;
border-radius:0 0 5px 5px;
-moz-border-radius:0 0 5px 5px;
-webkit-border-radius:0 0 5px 5px;
}
#content-top {
height:0;
}
#content {

}
#content .container {
padding:0;
width:1000px;
margin-bottom:20px;
padding-top:20px;
}
#logo {
position:absolute;
top:0;
left:0;
}
.menusearch {
position:relative;
width:260px;
border:none;
margin-top:33px;
margin-right:10px;
}

Many thanks, Rob