CODEWITHSUNDEEP
cssimagemobile
Guillaume F.
Guillaume F.

Reputation: 135

How to center a left-aligned image on mobile?

The image on my home page is left aligned.

While it looks great on desktop, it does not look good on mobile

I am trying to "center" the image defined by .entry-image.attachment-post.gsfc-alignleft on mobile views.

I have tried the following without success :

@media all and (max-width: 675px) {

.entry-image.attachment-post.gsfc-alignleft {

   width: 100%!important;
   max-width: none;
   text-align: center;
   margin-left: auto!important;
   margin-right: auto!important;
  }
}

My website is : parlons-survivalisme.com

What am I missing ?

Upvotes: 2

Views: 11770

Answers (3)

user9142991
user9142991

Reputation:

There are 2 straightforward solutions to center an image. The first is to set your image to 'display: inline-block' and then wrap it with an outer div where you set the 'text-align' property to center.

.wrapper-div {
  width: 100%;
  text-align: center
} 
.img {
  display: inline-block;
}

The other solution is to make sure your img is a block element (display: block) and then set the margin-right and margin-left to auto.

.img {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

If you still have a bug, look at the parent element width (to make sure it is 100% on small screens).

Upvotes: 0

Guillaume F.
Guillaume F.

Reputation: 135

As advised by Luca, changed the code to the following, which works !!

@media all and (max-width: 675px) {

a.alignleft {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
}

Upvotes: 0

Luca Jung
Luca Jung

Reputation: 1440

You need to set the outer a Tag to width: 100% in order to align the image above the whole width.

For instance:

a.alignleft {
  width: 100%;
}

Upvotes: 1

Related Questions