Work with html-element width when change scale of browser [closed] - html

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have the folowing html-murkup structure:
<div class="wrapper">
<div class="my_line"></div>
</div>
Wrapper has width 1200 px. I want to make div.my_line to has width 100% of screen when user change scale of screen. How can I do this? I try to use background-repeat, I am new in frontend, can somebody help me?

Answer 1

So just guessing here but you want the my_line div to stretch 100% of the width once the screen is at 1200px?
If so you'd use this:
/* Check the screen width, in this case looking for the screen to reach 1200px or below. Then extend the my_line div to 100% */
#media (max-width: 1200px) {
.wrapper .my_line {
width: 100%;
}
}

Answer 2

So, if you want the my_line to be the same size as the wrapper and shrink when you resize the window use this approach :
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.wrapper .my_line {
width: 100%;
}
That way wrapper will have 100% of the browser but be limited and always centered. While the my_line will inherit the full width.
So, when you resize, to less than 1200px the wrapper and my_line will shrink with the window.
EDIT:
If you want the my_line to be bigger than the wrapper, why placing it inside the wrapper ? Just place it above or underneath of the wrapper.
The solution you got works anyways if you change the HTML. The problem with your solution is that if you later add position: relative to the wrapper it won't work. While if you change the HTML structure so that my_line is direct children of the body it will still work.

Answer 3

Thanks guys, I do this and it help:
.my_line {
position:absolute;
width: 100%;
left:0;
right:0;
height: 3px;
}