Center Image in Mobile Landscape Mode

[elkiehound]

Hi,

On this page, you will see a Sign Up Now image, which has a class of .barefoot. I was able to get the image to be centered on all the Portrait mode of mobile devices, using the Chrome Emulator, however cannot figure out how to get the image in the center for mobile devices in landscape mode.

Here is the site: http://bit.ly/1OBzTaS

Any thoughts on how to get that image centered on landscape mobile too ?

Thank you!

Here is the CSS code:

.barefoot{position:relative;right:-100px;}
.barefoot a{max-width:100%;}
@media only screen and (max-width: 480px)
{.barefoot{right:-5%;}}

[Paulie_D]

I think you might want to take a look at this

https://css-tricks.com/centering-in-the-unknown/

and this

https://css-tricks.com/centering-css-complete-guide/

[elkiehound]

Thanks for those resources, I have read thru them. Kinda generic, I was hoping someone here could give me the exact code I need to solve this particular issue. My poke-and-hope strategy is not working too well.

Thank you.

[elkiehound]

Going thru the techniques in the articles, still cannot get the Pink Signup box to move at all on mobile devices, regardless of any padding changes. This is what I have now on this site: http://bit.ly/1J3wn5o

.barefoot {
margin: 0 auto;
width: 320px;
padding: 115px;
}
@media only screen and (max-width: 480px)
.barefoot {
margin: 0 auto;
width: 320px;
padding: 500px;
}

[Paulie_D]

I’m not seeing any media queries being applied at all when I check the site.

[elkiehound]

Turns out it was a set of brackets missing. Surprise you guys missed that!

barefoot{margin:0 auto;width:320px;padding:115px;}
@media only screen and (max-width: 480px) {
.barefoot
{margin:0 auto;width:320px;padding:1px;}
}

[Author]

Posts