HTML & CSS Help with Positioning

[LanceBPC]

Hi,

I' was working on my website trying to add links at the bottom to my social media pages and it wouldn't show up on the mobile version of my website. Would I have to use some sort of media query for this?

Code:

<div class="Twitter">
  <a href="https://twitter.com/bobmyers" target="blank">
  <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px; position: relative; top: 9px; left: 770px;">
</div>

 

[LTomy]

Welcome to CodeForum LanceBPC!

Could it be because the the link is displayed outside the window? The property 'left: 770px;' may be problematic if the screen size is small (Like a mobile).

 

[LTomy]

Also, why do not you simply write:

<a class="Twitter" href="https://twitter.com/bobmyers" target="blank">

   <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px; position: relative; top: 9px; left: 770px;">

</a>

?

*** Also, do not forget to put your code inside code tags, by clicking on the button </>, when you post it ***

 

[LanceBPC]

Welcome to CodeForum LanceBPC!

Could it be because the the link is displayed outside the window? The property 'left: 770px;' may be problematic if the screen size is small (Like a mobile).

The issue is that I want the Twitter icon to be shown when someone views my website on a mobile device, but it's not showing because I think the position is set at 770px, and a mobile device doesn't't have 770px so I think that's why it's not showing.

 

[LTomy]

The issue is that I want the Twitter icon to be shown when someone views my website on a mobile device, but it's not showing because I think the position is set at 770px, and a mobile device doesn't't have 770px so I think that's why it's not showing.

Yeah, this is what I said . You should use an other approach to positionate your link. Like using 'display: flex' or align it to the left by giving it the property 'margin-left: auto;' instead of using 'left: 770px;'.

 

[LTomy]

Also, you might want to consider putting your styles into a CSS file instead of using style="". This is often a better practice!

 

[LanceBPC]

Yeah, this is what I said . You should use an other approach to positionate your link. Like using 'display: flex' or align it to the left by giving it the property 'margin-left: auto;' instead of using 'left: 770px;'.

Ok, I'll give it another go. Thanks.

 

[LTomy]

No problem!
How much experience do you have with HTML/CSS? Do you know how margin/padding works?
In your case, you must give the property 'margin-left: auto;' to the <div> element:

<div class="Twitter" style="margin-left: auto;">
<a href="https://twitter.com/bobmyers" target="blank">
<img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px;">
</div>

 

[LTomy]

And you must put the image inside the <a> element:

<div class="Twitter" style="margin-left: auto;">
    <a href="https://twitter.com/bobmyers" target="blank">
        <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px;">
    </a>
</div>

 

[LanceBPC]

And you must put the image inside the <a> element:

<div class="Twitter" style="margin-left: auto;">
    <a href="https://twitter.com/bobmyers" target="blank">
        <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px;">
    </a>
</div>

Quite new, I know the basics of margins and padding. I tried what you said by aligning it to the left using margin-left but now when I go back to desktop view, the Twitter icon is now at the left of the screen, and I want it at the center on the desktop view. I want the Twitter icon to be just right above the "To The Top" sign centered in both desktop and mobile view.

 

[LTomy]

Ah.... The parent of your div (With the class="twitter") must have a width of 100%.

 

[LTomy]

If I were you, I would write something like:

<div style="width:100%;">
    <a href="https://twitter.com/bobmyers" target="blank" class="Twitter" style="margin-left: auto;">
        <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px;">
    </a>
</div>

 

[LTomy]

Did it work?

 

[LanceBPC]

Did it work?

Yes, it worked that the item was now centered both in desktop and mobile view, but I wanted to add more social media platforms down there, and that doesn't work with the width being 100%. I'm tryna replicate something like the picture shown below.

<div class="Twitter" style="width: 100%;">
  <a href="https://twitter.com/bobmyers" target="blank" style="margin-left: 50%;">
      <img src="twitter.png" alt="Twitter" style="width: 50px; height: 52px;">
  </a>
</div>

 

[LTomy]

Hi, add all the icons inside the div with the width of 100%. Also, apply 'margin-left: auto;' only to the first one at the left.

 

[LanceBPC]

Hi, add all the icons inside the div with the width of 100%. Also, apply 'margin-left: auto;' only to the first one at the left.

I'll give it a try.

 

[LTomy]

Alternatively, you could learn about flex-boxes: Simply apply the style "display: flex; justify-content: flex-end;" to the div that contains the icons and it should work.

 

[LanceBPC]

Alternatively, you could learn about flex-boxes: Simply apply the style "display: flex; justify-content: flex-end;" to the div that contains the icons and it should work.

It did work! Thanks. I got these lines showing up tho.

<div class="Twitter" style="width: 100%; margin-bottom: 20px;">
  <a href="https://twitter.com/bobmyers" target="blank" style="margin-left: 40%;">
      <img src="twitter.png" alt="Twitter" style="width: 52px; height: 52px;">
  </a>
  <a href="https://www.facebook.com/lance.ma" target="blank" style="margin-left: 5px;">
    <img src="fb.png" alt="Facebook" style="width: 50px; height: 50px">
    </a>
    <a href="https://www.instagram.com/1ance_ma/" target="blank" style="margin-left: 5px;">
      <img src="instagram.png" alt="Instagram" style="width: 50px; height: 50px;">
      </a>
      <a href="https://www.linkedin.com/in/lance-ma-1655081ba/" target="blank" style="margin-left: 5px;">
        <img src="linkden.png" alt="Linkden" style="width: 50px; height: 50px;">
      </a>
</div>

 

[LTomy]

Good. About the lines, I do not know... They look like tirets '-'.

 

[LanceBPC]

Good. About the lines, I do not know... They look like tirets '-'.

Hopefully, they go away magically, but I'll look into flex-boxes. This is the first website I'm building so CSS is still a learning curve.