How to center the block at the constriction?

Colleagues, good evening, the question is stupid, but you never know, you should make sure that it is not possible)
In General, gave me a layout, it has small indents on the edges of all sorts of decorative lines. I made them using linear-gradient. But the fact is that when the narrowing of the screen, the right side as it were shrinking and disappearing these bands, and would like they were always on the edges of the browser. I understand it is not real?
5deffc93ea4af512423129.png
April 3rd 20 at 17:23
2 answers
April 3rd 20 at 17:25
Solution
Hi.
You need to block, which is painted in a gradient, put the width to 100%. And if you decrease it will be redrawn.

Doing so makes the unit a background with absolute positioning and then on top of the mold. And then it is already stretched.
However, I see you have stripes on the picture. I.e. you have a block above it.
Ie you block it then block/blocks with pictures and on top of your block with a gradient. You need to allocate the parent block for all of this. Continue to give him 100% latitude. Further up the chain to give all units in this property until the block where the gradient.

But in General, Yes, let's code
Thank you good people, I'll try and accomplish your goal. If it does not, the code will be sent. Thanks again. - cory.Deckow22 commented on April 3rd 20 at 17:28
does not work, here is an example https://codepen.io/cory.Deckow22/pen/xxbVdom - cory.Deckow22 commented on April 3rd 20 at 17:31
@cory.Deckow22, man, you write - I want block 100% of the width, but not more than N pixels, then the gradient of do in the markup to N pixels, and then shrink the browser window to less than N pixels. Gradient is drawn at that pixel markup!
background: -webkit-linear-gradient(left, #FBF3F1 10%, #0072DA 10%, #0072DA 12%, #D4CFDC 12%, #D4CFDC 20%, #FBF3F1 20%, #FBF3F1 90%, #7A7CAB 90%, #7A7CAB 92%, #FBF3F1 92%, #FBF3F1 95%, #0072DA 95%, #0072DA 97%, #FBF3F1 97%);

your all.

I explained, if you need to ask more questions. Pixels to pixels! Rubber to percent! Or software recalculates and updated the css code on the fly. - Dedric_Rippin72 commented on April 3rd 20 at 17:34
@Dedric_Rippin72, and see there what's the catch, some lines come on the blocks obtained by the befor and after but, even with them not everything is so smooth. Why not ask for example the block with the stripe z-index: 1 and it beforŅƒ z-index: 3 for example. Main issue here is why the z-index for the pseudo-element, or Vice versa (don't remember), but how they are dependent on each other. At least I can't adequately separate the unit from the pseudo-element. The layout initially certainly not simple. where there is imposed one line somewhere different. That's about what I got on Board oceane.Hegmann with before web.skyorg.ru/tenerife
But part of the layout 5df886f6ed30a980091958.png - cory.Deckow22 commented on April 3rd 20 at 17:37
April 3rd 20 at 17:27
Solution
Code come on..
https://codepen.io/cory.Deckow22/pen/xxbVdom - cory.Deckow22 commented on April 3rd 20 at 17:30
@cory.Deckow22, one of the main requirements of layout flexibility. In your case, quite a spike done, complete nonsense, there's a from scratch rewrite would be. Gradients to be used hard and not flexible, especially because of the gradient as such is not present. For the task to draw such lines, use pseudo-elements :before :after
.about-tenerife-trip {
 position: relative;
}
.about-tenerife-trip:before {
 content: ";
 display: block;
 background: #0072da;
 width: 2px;
 height: 100%;
 position: absolute;
 top: 0;
 left: 5px;
}

and so on, well, the z-index property:; scatter above, below. - oceane.Hegmann commented on April 3rd 20 at 17:33
thank you very much, I will try, I will unsubscribe. - cory.Deckow22 commented on April 3rd 20 at 17:36
@oceane.Hegmann, it worked, thanks a lot! - cory.Deckow22 commented on April 3rd 20 at 17:39
@cory.Deckow22, I agree with the commentator above. But to produce elements in the plane ranging them using z-index does not suggest, knowingly nesting of elements. But you don't understand the concept of passing parameters to child elements. And what if began to pull the rubber (adaptiv to do) for a block, then inside through the pixels, nothing is done because they are constantly changing, and in this sense rubber design.

PS. All through the pixel is on, but the buttons say padding, or padding, or the minimum/maximum width, margin.

How would you explain the rubber design needs to stretch, this means that we don't know the final width (and height) and can't say - well, the background is 100 pixels under it, and versti or any other element to be 100 pixels inside this rubber design. So % all rubber.

Inside the do function blocks with min-width:px; width:%; margin not to spoil the usability. - Dedric_Rippin72 commented on April 3rd 20 at 17:42

Find more questions by tags CSSHTMLMedia queriesWeb Development