CODEWITHSUNDEEP
htmlcssmobile-website
Biscuit128
Biscuit128

Reputation: 5398

Image seems to not be centring on Mobile Device

I am trying to centre an image on my website - and it looks great when loading the page on a desktop computer, however on the mobile phone browser it appears like this

enter image description here

The css i am using to centre the image is as follows;

#logo
{
    max-width: 60%;
    min-width: 300px;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}


        <header>
            <img src="images/500x245.png" id="logo"</img>
            <h1>Welcome to AppCloud</h1>
        </header>

Can anyone suggest some alternative approaches as my way seems to be failing. Thanks

Upvotes: 0

Views: 34

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

Decrease the min-width it will work perfectly 

#logo{
    max-width: 60%;
    min-width: 300px; /** <<--- changes to be done here **/
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto 
}

Upvotes: 1

Related Questions