Responsive web designs is driving me crazy!

Question

hey everyone, I went through lots of Q&A and never finds an answer for my problem, which is:
How to make your website responsive the right way.. I put small pics on static background pic and the small pics should always be in the middle of the webpage for the design sake, the static pic has a default width of 100% and it works fine on every screen thanks to the viewport stuff, I set my small pic a margin of : px px px px; on 3 type of devices widths using @media, like (Min600px screen, 600to1024 screen and above 1650px screens), each has defaults and good on each device, my question is how to set the margin between those px's like if some one has a screen that is 1650px but his browser isn't on full width.. that's screws the margin of my pics and the whole design, I tried to put everything on (%) and it still a fiasco cuz the only solution I can think of to solve this is by setting margin for every individual px and yeah that's pretty dumb isn't?, I'm pretty sure I'm doing something wrong here but I can't figure it out, can someone help me with that ?

Answer 1

SOLVED IT!! 👏
I trampled on this "CSS hack" which fixed my small images position in one line code with no need to add anything to other @media screens.
the code is :
.slideshow-container{position: relative; z-index: -10;}
.sliderimg{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;}

explain:
- it sat the background image in relative position and the small images on top in an absolute position to act like a child's to the background image.
- then it position it away 50% from top and 50% from left which made them kinda in the center, but elements start at top left corner so it's basically not in sharp center.
- and here comes the hack tool "transform: translate(-50%,-50%)" with minus values it helped to manipulate the images to get back 50% from top and left from the current position so it's made it at sharp center and fixed my problem. 👏

thank you'll for your support, really appreciates it <3

Answer 2

margin-top:10vh;
margin-right:10vw;
1vw or 1vh is 1% of total view port

works accordingly on each device no need to use px

Answer 3

Basic:
https://code.sololearn.com/W3gS00IGw160/?ref=app

Advanced:
https://code.sololearn.com/W4CYCf5Izf4Q/?ref=app

For positioning background image in center of page, use background-position : center

Answer 4

I think it is mentioned in the Responsive Web Design course: % vh, vw....

Answer 5

I can't test it at a computer at the moment. Generally, relative size could help, maybe then you need less media query.
Maybe you can put a minimal working example on sololearn playground?

Answer 6

Use relative sizes as %, vw, vh, like others also said.
But also make your layout using grid or flex.
I suggest you to make site, for phone first (you will with just html structure got phone layout, mostly), than add some @media for tablets and pc.

Check this link from pc, to test how it works, this are all size units in css
https://www.w3schools.com/cssref/css_units.asp

I found best to use vw to container like body, and than use % for childrens

Answer 7

PanicS Furqan_Elahie [Imaziue Coders] thank you guys for additional information, i will try all things you said and see what happens.

Answer 8

Lisa yes i kinda remember something like that but i have to rereview it cuz i never used it, thank you.

Answer 9

Can you please link an example code?

Answer 10

ok here's what I use, that's a slider, and to make it lighter i had to use 1 background and the slides are small images on the top that slides.
HTML:
<div class="slideshow-container">
<img src="/image/Index/index background.jpg" style="width: 100%;">
<div class="Slides">
<img class="sliderimg WIC" src="/image/Index/Wic.png">
</div>
<div class="Slides">
<img class="sliderimg CR" src="image/Index/Cr.png">
</div>
<div class="Slides">
<img class="sliderimg TA" src="image/Index/Ta.png">
</div>
<div class="Slides">
<img class="sliderimg SH" src="image/Index/Sh.png">
</div>
<div class="Slides">
<img class="sliderimg KG" src="image/Index/kg.png">
</div>
<div class="Slides">
<img class="sliderimg Logo" src="image/Index/Logo.png">
<h1 class="Text">All in one place</h1>
</div>
</div>

CSS:
.sliderimg{display: block;}
.WIC{margin: -410px 0 0 490px;}
.CR{margin: -417px 0 0 475px;}
.TA{margin: -430px 0 0 520px;width: 19%;}
.SH{margin: -410px 0 0 490px;}
.KG{margin: -440px 0 0 490px;}
.Logo{margin: -405px 0 0 490px;}
.Text{text-align: center;
position: relative;
margin-top: 150px;
color: whitesmoke;
text-shadow: 1px 1px 2px black;
font-size: 80px;
font-family: ui-rounded;
z-index: 10;
}
@media screen and (max-width: 600px) {
.WIC{margin: -139px 0 0 38%;width: 25%;}
.CR{margin: -139px 0 0 37%;width: 25%;}
.TA{margin: -139px 0 0 41%; width: 18%;}
.SH{margin: -139px 0 0 38%;width: 25%;}
.KG{margin: -139px 0 0 40%;width: 20%;}
.Logo{margin: -130px 0 0 40%;width: 20%;}
.Text{margin-top: 55px;font-size: 20px;}
}
@media screen and (min-width: 1650px) {
.WIC{margin: -599px 0 0 38%;width: 25%;}
.CR{margin: -629px 0 0 36.2%;width: 25%;}
.TA{margin: -599px 0 0 41%; width: 18%;}
.SH{margin: -599px 0 0 38%;width: 24%;}
.KG{margin: -599px 0 0 40%;width: 20%;}
.Logo{margin: -560px 0 0 40%;width: 20%;}
.Text{margin-top: 219px;font-size: 120px;}
}

Answer 11

Relative sizes! I will search that, also i’ll try to provide some exp. on the playground..thanks.