Help error display on mobile devices using Roots Theme

Hello
I am using Root theme for wordpress. But when accessed by mobile devices to encourage small screen size, the image of spills article content.
Please be guided to overcome.
Thank you!

Set images to max-width: 100% in CSS

1 Like

In the file / Assets / css / img main.min.css existed img{max-width:100%!important}
Please help me specific instructions

Thanks in advance

Need an example. The image will fill the container it is in, so if you put it in a .container .row .col-xs-12, on a phone, it should be 100% width the screen, minus the padding on the sides.

Bootstrap 3 removed ‘responsive images’ by default and instead provided a class to add them to each individual image.

http://getbootstrap.com/css/#overview-responsive-images

A quick way to do this in app.less is

.post img {
	.img-responsive;
}

But be careful with external libraries such as Google Maps. This is the reason this was removed. I however, prefer it the old way. I remove the max-width directive on elements that do not need it rather that add it to each image i need it on.

2 Likes

thanks @kalenjohnson, @enollo !