How to center images in CSS two column for mobile

[DJ Carl]

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

[AnitaC]

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.

[DJ Carl]

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

[AnitaC]

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.

[DJ Carl]

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

[AnitaC]

You need to clear the browser cache.

---

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

[DJ Carl]

This reply has been marked as private.

[Author]

Posts