Web Development

Stretch image so that it touches the edges of mobile screen using – WordPress pages or posts

If you want to stretch the images to full width or want the images to touch the edges of mobile screen then you can implement that using this jQuery and css. You can apply this in your wordpress post and pages images too.

Image will be touching the edge of mobile screen like this screenshot above

Here is the jQuery ( you will need to change the CSS Class in the code)

<script>
	jQuery(document).ready(function(){
	jQuery(".entry img").each(function(index, element) {
   jQuery(element).wrap("<span class='stretch'></span>");
});
		});
</script>

Related CSS

@media (min-width: 320px) and (max-width: 767px) { 
.stretch {
    margin-left: -25px !IMPORTANT;
    margin-right: -25px !IMPORTANT;
	display:block;
	}}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s