• 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

How to center images in CSS two column for mobile

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 › How to center images in CSS two column for mobile

This topic is: resolved

Tagged: center image, css, html, Metro Pro, mobile, Responsive Two Column

  • This topic has 6 replies, 2 voices, and was last updated 4 years, 8 months ago by DJ Carl.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 25, 2020 at 4:17 am #501588
    DJ Carl
    Participant

    Hello,

    I'm using Metro Pro. I have two columns for the desktop and looks fine.

    Problem: When I look at images on mobile they are not centered.
    What is the CSS property to center images on mobile?

    <meta name="viewport" content="width=device-width, initial-scale=1">
    * {
      box-sizing: border-box;
    }
    
    /* Create two equal columns that floats next to each other */
    .column {
      float: left;
      width: 50%;
      padding: 5px;
    }
    
    /* Clear floats after the columns */
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
      }
    }
    <div class="row">
    	<div class="column" style="background-color:#FFF;">
    		<p style="text-align: center;"><img title="Kelly Clarkson and DJ Carl©" alt="Kelly Clarkson and DJ Carl©" src="https://djcarl.com/wp-content/uploads/kelly-clarkson-djcarl.jpg" width="280" height="160"/></p>
    		
    	</div>
    	<!--column 2-->
    	<div class="column" style="background-color:#FFF;">
    		<p style="text-align: center;"><img title="Stevie Wonder and DJ Carl©" alt="Stevie Wonder and DJ Carl©" src="https://djcarl.com/wp-content/uploads/stevie-wonder-djcarl.jpg" width="280" height="160"/></p>
    		
    </div>
    </div>
    http://djcarl.com/_website/mobile-center.jpg
    October 25, 2020 at 4:31 am #501589
    AnitaC
    Keymaster

    Hi Carl, we can't help with CSS from an image. We need a link to the page. This may be why your post go unanswered. Can you provide a link?


    Need help with customization or troubleshooting? Reach out to me.

    October 25, 2020 at 4:36 am #501590
    DJ Carl
    Participant

    No problem. Trying to center images for mobile...
    https://djcarlcom.stage.site/
    staging_mrtbjq
    cgWcYCWTHNpY

    October 25, 2020 at 2:41 pm #501593
    AnitaC
    Keymaster

    You're using SCSS grid. You'll need to add this to the Additional CSS box to center that.

    .home-top .row {
        display: contents;
    }
    

    The theme you're using is pretty old. It's no longer sold. I see some other things that are kinda wonky in there that may require customization.


    Need help with customization or troubleshooting? Reach out to me.

    October 25, 2020 at 7:22 pm #501596
    DJ Carl
    Participant

    Hi, Anita,

    Thanks for the response. Appreciate it mightly...I'm using the StudioPress Metro Pro theme. I have an old site and working on the Metro Pro theme site on a staging platform...

    If you look at the HOME PAGE - https://djcarlcom.stage.site/. The pictures are not centering on mobile...

    HELP...

    PASSWORD:
    staging_mrtbjq
    cgWcYCWTHNpY

    October 26, 2020 at 2:35 am #501599
    AnitaC
    Keymaster

    You need to clear the browser cache.


    Need help with customization or troubleshooting? Reach out to me.

    October 26, 2020 at 2:57 am #501600
    DJ Carl
    Participant
    This reply has been marked as private.
  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘How to center images in CSS two column for mobile’ is closed to new 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