• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Essence Pro — images on the mobile version

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Essence Pro — images on the mobile version

This topic is: not resolved

Tagged: Essence Pro, featured image, single post

  • This topic has 8 replies, 2 voices, and was last updated 5 years ago by Brad Dalton.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 24, 2020 at 1:39 am #498912
    iwannabe
    Participant

    Hi!

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

    My blog post:
    blog post

    My homepage:
    homepage

    https://gruzinim.com/batumi/luchshij-adzharskij-hachapuri/
    May 24, 2020 at 2:22 am #498913
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    May 25, 2020 at 6:50 am #498922
    iwannabe
    Participant

    All images

    May 25, 2020 at 8:37 am #498925
    iwannabe
    Participant

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

    May 25, 2020 at 6:05 pm #498931
    Brad Dalton
    Participant

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


    Tutorials for StudioPress Themes.

    May 26, 2020 at 12:01 pm #498952
    iwannabe
    Participant

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

    May 26, 2020 at 5:47 pm #498957
    Brad Dalton
    Participant

    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.

    May 27, 2020 at 10:20 am #498972
    iwannabe
    Participant

    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?

    May 27, 2020 at 10:57 pm #498985
    Brad Dalton
    Participant

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble