I have the same issue. I am on a responsive theme. I inserted an image under "featured content" on my homepage using the CSS shortcode:
<img class="aligncenter" src="http://www.jlimcustomdesigns.com/wp-content/uploads/2013/07/Front-Page-Gallery-Banner1.gif" width="840" height="300" alt="">
however, when I view my homepage on my smartphone,the image does not re-size with the browse. The image ends off to the right off center and overall looks funny.
Someone suggested adding in:
max-width:100% !important;
height:auto;
display:block;
wherever I see the image tag. I tried it and nothing.
Should I be making any changes to the "featured content" section found in my child style.css? my website is: jlimcustomdesigns.com
/* =Featured Content
-------------------------------------------------------------- */
#featured {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 4px;
padding-bottom: 40px;
width: 99.893617021277%;
}
#featured p {
font-size: 18px;
font-weight: 200;
line-height: 27px;
padding: 0 40px 0 40px;
text-align: center;
}
#featured-image {
margin: 40px 0 0 0;
}
#featured-image .fluid-width-video-wrapper {
margin-left: -20px;
}
.featured-image img {
margin-top: 44px;
}
please help. I am new at wordpress and I have no idea what to do.