This question already has answers here:
CSS selector based on width?
(4 answers)
Can media queries resize based on a div element instead of the screen?
(11 answers)
Closed 3 years ago.
Is there a passive method (i.e. not JS) to make a div disappear, when its width is less than a certain value?
Something like...
.my-div[width < 120px] {
display: none;
}
Edit #1
I'm already using media queries for responsive design, but the point at which I want to hide this div is in between two break points. I'll make another media query if I must, but I was hoping for some niche secret CSS trick.
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I need to achieve the following layouts in CSS:
I've been trying flexbox but cannot get container 'C' to appear correctly on tablet width. I can reorder the columns using CSS order but the width of 'C' spans the full width of the page but it needs to be constrained to the same width as container 'A'.
I've setup a blank starter pen here because I can't post my project: https://codepen.io/ahdigital/pen/GRqpQRL?editors=1100
My question is, will this be possible with flexbox, or should I use another CSS approach? (Trying to avoid JS).
No.
By using nested flexboxes you can achieve a similar layout if the two boxes that align vertically to each other (A and C in this example) in tablet layout are adjacent, but that isn't the case here.
Use Grid to do the layout instead.
With media queries you could use Flexbox for desktop, Grid for tablet, and neither for mobile.
This question already has answers here:
Move div with dynamic height out of its parent container
(2 answers)
Translate X and Y percentage values based on elements height and width?
(9 answers)
Closed 4 years ago.
Is there a CSS property/trick that would allow me to move a div in a certain direction same amount of pixels as current div size ?
For example I don't know div height but I want to move it upper until it goes out of the screen, that would mean [move it upwards same amount of pixels as box height].
I am thinking something like: margin-bottom: current-height; or margin-left: current-width;
Is there anything like that ?
This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 7 years ago.
I have made a columnar layout that works fairly well for my needs, but I am experiencing an issue with the height of one column. I have prepared a jsBin that demonstrates the problem;
http://jsbin.com/mawuliyulo/1/edit?html,output
Basically, when you scroll down - eventually you start seeing white on the left side. Is there any way to force this to stretch all the way down indefinitely?
This is not using a flex-box layout. It is simply achieved using :before, and :after pseudo-selectors.
Add position:relative to your main-container class
This question already has answers here:
How to avoid empty clear divs?
(5 answers)
Using :after to clear floating elements
(5 answers)
Closed 8 years ago.
I'm using a div with css of clear:both;
The div has no content and the clear:both is the only style applied to it. It works fine on my devices to solve floating problems.
My question is: does the div need content, like a non breaking space to work on all devices and browsers? Do some browsers ignore empty divs?
Thank you
I'am pretty sure no browser 'ignores' an empty divs. I would add a 100% width just to be sure it works.
This question already has answers here:
Should I size a textarea with CSS width / height or HTML cols / rows attributes?
(13 answers)
Closed 8 years ago.
what is considered best practice when specifying the dimensions of an HTML textarea? only using cols/rows (which i think are mandatory with html strict 4.01) or specifying width and height using css properties?
or even setting cols/rows for validity and then overriding the actual size using css?
Please see this question: Should I size a textarea with CSS width / height or HTML cols / rows attributes?
I agree with the top answer. You use rows/cols in case CSS is not supported; if width or height are specified using CSS, they override the value derived from rows/cols.