Trying to showcase images stretching from edge to edge on mobile screens has been a challenge. The container's maximum width is currently set to 90%, creating an obstacle. To address this issue, I've implemented a custom CSS class specifically for images that need to be displayed across the full width of a mobile device screen:
@media only screen and (max-width: 768px)
.my-full-width-feature-image {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
The dilemma arises when the above CSS code also affects the figcaption element's display to stretch edge to edge. Is there a way to restrict my class to apply solely to the img element?
I have attempted using ".my-full-width-feature-image img" but it appears ineffective as well.
Below showcases how the HTML content is structured within my WordPress website:
<figure class="wp-block-image size-large my-full-width-feature-image">
<img width="780" height="520" src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" data-src="https://nomadandinlove.com/wp-content/uploads/swapfiets_review.jpg" alt="swapfiets bike sharing bicycle with blue tire in berlin with cherry blossoms in the background">
<figcaption>Cherry blossom hunting in Berlin with our monthly bike rental, Swapfiets</figcaption>
</figure>