CODEWITHSUNDEEP
htmlcssmobile
Dion Janoyev
Dion Janoyev

Reputation: 1

trouble aligning pictures for mobile sites

I'm a beginner coder and just finished my first website for my music group. It looks great on desktops.

Check it out! grnbrier.com

On mobile the pictures are all messed up.

incorrect image placement

Here's my code for it. Can anyone tell me what I did wrong or any way to make it look better on mobile phones? 

<style>
    body {
        background-color: black
    }
    .image-margin {
        margin-left: 525px;

    }

</style>
</head>

<body>
<center> 
    <img src="https://i.imgur.com/WEnPPlD.png" alt="Logo" width="400" height="300" >
</center>
<a href="https://grnbrier.bigcartel.com/"><img src="https://i.imgur.com/sHPjLDi.png" onMouseover="this.src='https://i.imgur.com/CV7ElQf.png';" onMouseout="this.src='https://i.imgur.com/sHPjLDi.png';" class="image-margin" width="200" height="200" title="clothing" alt="Clothing"></a>
<a href="https://www.soundcloud.com/love_seat"><img src="https://i.imgur.com/QdrtoZ6.png" onMouseOver="this.src='https://i.imgur.com/XrlDin7.png';" onMouseOut="this.src='https://i.imgur.com/QdrtoZ6.png';" width="200" height="200" title="music" alt="Music"></a>
<a href="https://www.instagram.com/grnbrier/"><img src="https://i.imgur.com/x5POgmB.png" onmouseover="this.src='https://i.imgur.com/qRTlMh2.png';" onmouseout="this.src='https://i.imgur.com/x5POgmB.png';" width="200" height="200" title="socialmedia" alt="Socialmedia"></a>

Upvotes: 0

Views: 37

Answers (1)

ejelicich
ejelicich

Reputation: 56

It's because of the margin left you have set to your first image using .image-margin class. It's not only on mobile it does not look centered, it happens also in other resolutions different to the one you are using to design it.

You could try and wrap your images in a div element. Then you can set a display: flex property to that div and then start playing around with the aligment and justify properties.

For instance:

<div class="my-flex-div">
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
  <a href="#"><img src="myimage.jpg/></a>
</div>

And then your style would be:

.my-flex-div {
    display: flex;
    justify-content: space-around;
}

I recommend this article in order to learn more about flex.

Then in order to make it look nice on mobile you can start using media queries.

@media only screen and (max-width: 600px) {
  .my-flex-div {
    flex-direction: column;
  }
}

Have a look to this article regarding media queries.

Try start playing around with this stuff, and you'll get much nicer results.

Upvotes: 1

Related Questions