I am trying to achieve an effect contrary to that promoted with flexbox. I have a 3x3 div layout and I want the center div to stay fixed in the middle of the screen and the 8 divs around it to be shown only in part (this is, if the set of 9 divs is larger than the screen).
As far as I could investigate, flexbox always brings solutions to avoid this effect, and I want to provoke it.
Is there a css command to keep this design fixed in the center so that it is not deformed, and its size is independent of the screen size?
use css max-width:250px; or width:250px; with css media query
refer link [https://www.w3schools.com/cssref/pr_dim_width.asp][1]
Related
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
I am trying to create a grid of 4 square divs that stack on top of each other when the browser is resized to mobile size. I also need to put vertically and horizontally centered text in each div. To make things even more complicated for me, each div's width is defined as a percentage, not as an absolute value.
Is this even possible to achieve?
Yes this is possible. I prefer Flexbox for this. Read up on it e.g. here
Firstly, sorry about the mouthful that is the title.
I'm trying to make a responsive navigation with fluid container and different sized items. I need to know if it's possible (if so how) to keep the spacing between the items the same size for all items while keeping the first and last items flush to the edge of the container.
The red illustrates the spacing, which should be the same between all elements
I can do something like the above with a fixed width pretty easily, but as soon as the window is resized, I can't seem to get the gaps to grow/shrink to the right size.
Percentage margins would seem to be the answer to this but because the container can resize but the items inside cannot, the items either spread onto the next line if the window is too small or not reach the end of the line if the window is too big. I've also tried making the elements a fixed width and then text-align:center; but the spacing not what the designers want.
Has to be compatible with all of the modern browsers and IE 7+
Here's a (badly made) fiddle: http://jsfiddle.net/GGwdW/
Check this solution, might be helpfull: "text-align: justify;" inline-block elements properly?
For old IE's there's text-align-last property.
Perhaps I'm the last developer to ask this but I don't get it:
I'm considering using a fixed width layout such as this one:
http://www.gridsystemgenerator.com/gs02.php
Based on the screen size the left and right columns resize dynamically while the middle grid stays fixed. Great!
Now what I don't understand is that there are ton of websites out that use this approach but they also have page sections which have borders and background images that fill the complete screen width.
An example:
http://www.gridsystemgenerator.com/gs02.php
The top strip, tab menu and footer sections have lines that extend out over the full screen width.
How do they do this?
Pavlo, thanks for the tip!
So it turns out that there are container divs which are width 100 and float left which can contain design elements across the whole page width. Then the fixed grid divs are embedded into the container divs.
:)
I'm in the process of creating a responsive site (currently only working on the main content.)
I've created two floated divs with percentage based widths. One contains an image which resizes with the browser resizing. The image has a min-width of 100px.
Can anyone tell me why when put into a mobile sized width it doesn't drop down? How can I make the image stack underneath the text?
JS Fiddle
Live site
If you apply the:
min-width: 100px; to the aside element instead, then on a small screen it drops to the bottom. Good luck with the design. (Like this: http://jsfiddle.net/eddturtle/7d6D7/1/)