Forums

Center Image with SIte Wide Image Block

Permalink
Hi there,

I'm stumped with an image that's not displaying center-center on mobile. I've tried:

~ changing alignment inside the image settings from Responsive to Center
~ block image alignment to center-center
~ made sure my png didn't have extra margins on the sides

Page is athttp://www.thewomensclub.com.php56-22.dfw3-1.websitetestlink.com/in...

I'm using Vedana template, C5 version 5.7.3+

Thanks in advance!
 
hutman replied on at Permalink Reply
hutman
If you are talking about the "Free Guest Pass" image, it is not centering because you have the class "pull-left" on it's container.
TWCMissoula replied on at Permalink Reply
oops, forgot to mention it's our Logo, the purple "The Women's Club."

Sincerely,

*Shelby Humphreys*
Administrative Assistant
The Women's Club Health and Fitness Center
2105 Bow St
Missoula, MT 59801

(406) 728-4410

thewomensclub.com

[image: facebook-gray] <https://www.facebook.com/thewomensclub> [image:
twitter-gray] <https://twitter.com/TWCMissoula>[image: Youtube-gray]
<https://www.youtube.com/user/TWCMissoula> [image: Pinterest-gray]
<https://www.pinterest.com/thewomensclub/> [image: Instagram-gray]
<https://instagram.com/twcmissoula/> [image: googlePlus-gray]
<https://plus.google.com/116072497189498738346/posts?hl=en
hutman replied on at Permalink Reply
hutman
If you add this style it should center the image

.logo img{
margin: 0 auto;
}

Because you have the class img-responsive on that image it gets the style display: block which doesn't center like inline-block elements would, but adding that class should make it work.
TWCMissoula replied on at Permalink Reply
Thanks for your quick reply, Hutman. I'll give it a shot.

Sincerely,

*Shelby Humphreys*
Administrative Assistant
The Women's Club Health and Fitness Center
2105 Bow St
Missoula, MT 59801

(406) 728-4410

thewomensclub.com

[image: facebook-gray] <https://www.facebook.com/thewomensclub> [image:
twitter-gray] <https://twitter.com/TWCMissoula>[image: Youtube-gray]
<https://www.youtube.com/user/TWCMissoula> [image: Pinterest-gray]
<https://www.pinterest.com/thewomensclub/> [image: Instagram-gray]
<https://instagram.com/twcmissoula/> [image: googlePlus-gray]
<https://plus.google.com/116072497189498738346/posts?hl=en
tallacman replied on at Permalink Reply
tallacman
add this to your main.css file

@media (max-width: 990px){ 
img.ccm-image-block.img-responsive.bID-799 { 
   margin-left: auto; 
   margin-right: auto;
}
}
TWCMissoula replied on at Permalink Reply
Thanks! I'll give that a try.

Sincerely,

*Shelby Humphreys*
Administrative Assistant
The Women's Club Health and Fitness Center
2105 Bow St
Missoula, MT 59801

(406) 728-4410

thewomensclub.com

[image: facebook-gray] <https://www.facebook.com/thewomensclub> [image:
twitter-gray] <https://twitter.com/TWCMissoula>[image: Youtube-gray]
<https://www.youtube.com/user/TWCMissoula> [image: Pinterest-gray]
<https://www.pinterest.com/thewomensclub/> [image: Instagram-gray]
<https://instagram.com/twcmissoula/> [image: googlePlus-gray]
<https://plus.google.com/116072497189498738346/posts?hl=en