Essence Pro — images on the mobile version

[iwannabe]

Hi!

How can I make full-width images on blog posts in the mobile version, like on the homepage?

My blog post:

My homepage:

https://gruzinim.com/batumi/luchshij-adzharskij-hachapuri/

[Brad Dalton]

You want full width featured images on single posts on mobiles?

---

Tutorials for StudioPress Themes.

[iwannabe]

All images

[iwannabe]

I need the images to stretch from edge to edge (full width) on a mobile device.

[Brad Dalton]

You can use CSS for that wrapped in a media query.

---

Tutorials for StudioPress Themes.

[iwannabe]

I do not know what to write in CSS 🙁 Can you help me?

[Brad Dalton]

Sorry i can't teach you CSS quickly however this site is very useful https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

You can also use the CSS for media queries at the end of your child themes style sheet as a guide.

---

Tutorials for StudioPress Themes.

[iwannabe]

I already have such code, but it does not work 🙁

.wp-block-button.alignright, .wp-block-cover.alignright, .wp-block-image .alignright {
margin-left: 0;
width: 100%;
}

.wp-block-image img {
width: 100%;
}

How much will it cost if you solve this issue for me?

[Brad Dalton]

Modify the CSS wrapped in the media query

@media only screen and (max-width: 860px) {

    .wp-block-image img {
         width: 100%;
    }

}

And you'll also find CSS rules with padding that need to be modified.

If you're interested in hiring some, start a new thread.

---

Tutorials for StudioPress Themes.

[Author]

Posts