How can I stretch content inside the flex item to reach to the border of the container? For example, I am going to create family photo gallery using flexbox. But some images is not stretched to the bottom of the container?
I used this webpage https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_image_gallery.
But some images are short, not stretched till the bottom of the container.
Related
I'm trying to use a CSS grid from this page, but I can't seem to figure out how the outside margins of the layout is done.
How do you define the content such that it scales responsively up to a certain width, then becomes a fixed-width, centered layout when the window is larger than that size?
http://www.responsivegridsystem.com/
I've created a few vertical menus in the past on bootstrap using the dropdown-menu compontent. To make it a megamenu I would have to specify a specific width for the submenu to flyout to - a definitive width. This is because the vertical width(parent) is too small.
The problem is the content is dynamic, so it would be good to have this width flexible - by using %'s, as at the moment we have to mould the content to fit the menu. If I add the col-lg-12 class to the submenu it will only be 100% of its parent width (the vertical width), I can't increase the vertical width as this would span across the page.
I want something like this - http://geedmo.github.io/yamm3/
However, the yamm3 example is a horizontal nav, therefore the parent is already spanning across the page to give the submenu a huge range to add whatever col-lg-?? it likes.
Does anybody know how to turn the Yamm3 example into a vertical navbar but keeping the flexible mega-submenu width without being restricted by its parent?
I have created a div resizable from two directions ie. East and West and facing following
Issues:
while stretching div component from left, the position of component is changing ie. reaching to top side of the specified container.
2.while stretching div component from right,i am able to stretch it to half of the specified container only but not the full container.
3.while repositioning the stretched div,the size of top and width are increasing inversely proportionally.
Requirement:
I want div component to resize from left and right in the same row with no increase in height or top.
Please suggest something!!
I'm currently designing my Portfolio Website, and I've decided to implement a light Grid Pattern Background image, the squares are 32px.
The Problem I am having is keeping my content aligned to the grid pattern when resizing the browser window, when I make the browser larger, the content moves with it, and instead I want to fix the content in position, central and aligned with my grid pattern.
One thing I tried which actually made my content stay in position was
background:url (#) repeat center top;
but this messed up my grid image and started on half a square.
I have also tried the Margin:0 auto; to centre my content but again this doesn't align it to the grid lines....
So I am stuck...
I have a layout with a variable-length menu on the left, and variable-length content on the right. In between the menu and content is a divider implemented using a repeating background image, which is part of the content div. This means that as the content expands or contracts, so does the divider.
If the height of the content is less than the height of the menu, the divider is still the height of the content, when what I really want is the divider to be the height of the menu in this case. Is there any way to implement this in CSS?
Have the dividers background image in the content are and the menu and have the content area overlap the menu the width of the divider using negative margins or something similar.
An alternative would be to use the background image on a wrapper div and use background-position to place it between the menu and content divs.