Image alignment question on tribute page

I’ve been pulling my hair out with this for a couple hours now.

So, basically I have a problem when viewing my page on a mobile viewport, the #title text comes off the left side of the image. The solution I thought would be just make the image the full width of the mobile view port.

but, when trying todo this ,even on the desktop viewport, I cannot seem to get rid of the left margin or padding on my #main element. (honestly not sure which is altering it). I have set margin and padding to 0 to test but the gap still persists. Even just trying to get the image to fill the grey #main section to the top, left, and right edge is something I cannot achieve. using the fit variable will make the image the right size but the left mystery margin pushes the right side of the image out of #main.

is this happening because of the original dimensions of the image source? or what am I missing?

tribute page with issue (link updated to code source, my bad)

Hey There!
I can’t see the code but it sounds like you are unit a fixed unit to size your img such as “px”. Try using %, em, rem which are adaptive units and see how that works out for you. =)
Hope it helps

1 Like

Hey! sorry dumb move with the link. its updated. I am using percentage based measurements for my img i believe.

Hey there, Okay…
So I switch on your media query left to 55px and it went in. I might also have made the font smaller but that’s totally up to you…
Let me know if we are getting close =)

1 Like

Yea I definitely had that option and to lower the text size (wouldn’t be big enough imo) but, say I wanted to have the top, left and right outer edges of the image flush with the edge of the grey #main element, so I can see no grey on the left/top/right of the image. How would I achieve that? even on the original desktop view I can’t seem to accomplish it. It’s just a point I don’t want to move forward without understanding. :slight_smile: As I said about there seems to be a left margin I cannot alter for some reason. Ideally with the media query I would just have the image span the whole width of the phone at the top. I think it would look good as well solve the text problem.

Well, well, well…
after 30 min… here’s what I came up so you can keep everything with position absolute:

*{
  margin:0;
  padding:0;
}

body {
  background-color: #0B0C10;
  width: 100vw;
  
}
#main {
   position: relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width: 90vw;
  margin-left: 5vw;
  max-height: 100%;
  height: auto;
  background-color: #1F2833;
  border-radius: 5px;
}
#image-div {
  position: relative;
  width: 90vw;
  height: auto;
}
#image {
  position: relative;
  width: 90vw;
  height: auto;
}

=) I can break it down privately if needed. Let me know if that works for you.

1 Like

Wow! Thank you for spending that much time on helping me. That’s so kind of you. I will go through this right now and see If I can implement and understand it properly and let you know if I cannot. Again thank you so much. You are to kind :slight_smile:

1 Like

Thank you, your solution worked for what I asked. Still having problems with the cellphone scaling version (new problems lol). I think I need to revisit some concepts. Thank you again.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.