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?
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
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 =)
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. 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.
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
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.