I"m designing the following website and Im trying to make it responsive from the beginning. I think its looking ok for the different devices, but the beginning looks really terrible when Im scaling down the tab in my browser, please see video attached. Can anyone help me? I don’t know what Im doing wrong especially the line and heading are moving to the left of my screen. I dont want it to do this, it would be nice if it could already scale it down too, is that possible?
Its really hard to know what is the problem ((maybe add screenshot of the bug).
You use a lot of negative margins this could cause a lot of bugs. Also you change the dom order (in your case why its not “line” “H” “img”). You create (“line” “img” “h”) and than change the layout with negative margins
In general its better to create the line as div and not as img (css control + sharper in any size). Her, for example, you see this idea (the line above “ABOUT UIKIT” http://unpackcms-template.webflow.io/about/about-style-1
The style: small-divider { display: block; width: 50px; height: 2px; margin-right: auto; margin-bottom: 30px; margin-left: auto; background-color: #a0cd4e; }
Why not use grid? The text is on the image beacuse you set pixel width (change the heading to relative to set higher Z-index - and thats it. No negative margin and minimal code so its easiest to control this on responsive + less bugs + you always can use relative for the img and move it a little)
Thanks! The text over the image is not the issue, its kinda wanted but I still have to lighten up a part of the big image, so its readable. How can I move up the line and headline without using negative margins? I want them next to the big image - Maybe can someone make a video and show me how to do this?
so when Im using your approach the issue is that I cant make the big image bigger than its column. Is there a way to fix this? Even if I set this to relative, I cant size it up
