See the attached. How would I float the images to the left of a single div of text on desktop, and then slide the lower images under under the text on mobile/narrower screens?
The top image is easy, changing the flex direction, or even with grid changing grid-template-columns from 1fr 1fr to 1fr. I've also experimented with putting the images in a div together.
Is this a good time to use order?
Related
I'm trying to build a login page, and have 3 SVG images, where as 2 on the top, one one bottom right. They are all positioned absolute, where the container is displayed relative.
Now I basically want a div that's on 30/40% of the top of the outer container. What would be the best approach to go over this?
1) Make a div that's a fixed height, but this is not responsive and I will work with media queries.
So it's about the blue container as displayed on the on the image, where as the red boxes do not have a height as they are abstract.
enter image description here
Any idea's?
This div should be on 30% on the top of the height.
What approach would be the best for this?
For vertical alignment, you may use flex-flow: column; on the container. Then set flex-basis as a percentage on the flex-items. Thus you can control the relative height of the child elements inside the container.
See: jsfiddle
I have a site that I am trying to make more mobile-friendly (http://realnewsline.com/). The problem I am having is that the three main images at the top of the website get cut off on mobile devices and 1 or two of them become impossible to view. Is there any way I can fix this either in Wordpress or with some CSS? Thanks!
Firstly, your .image-wrap divs have an inline style attribute setting the width to 300px. If you remove that, the images will scale to fit on the device.
To avoid the columns disappearing off the screen when it becomes small, you can make them wrap to become rows. Currently, the .featured-wrap elements have a width set to 33% (via body #wrapper #featured .featured-wrap) and 100% (in .featured-wrap). I would suggest using the display: flex; flex-wrap: wrap; property on their parent element (#featured), giving the .featured-wrap elements an absolute with (say 300px, make sure to remove those other width properties).
Here is some more info on the flex display mode: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ I find it very useful.
I have a CSS grid layout for a webapp, with a fixed-size header and footer (defined with rem units), and an expandable center row (defined as 1fr) that contains two sidebars and a central content area. The outer grid container is defined with a width and height to fill up the viewport (100vw/vh). I want the center row to take up all the space between the header and footer, and for any overflow to scroll, rather than to expand the height of the page.
I've tried various possible solutions, including using overflow-y:scroll, but nothing seems to work. The extra content makes the page longer, rather than making the region scrollable.
I don't want to use a fixed size for the center row, because I want it to expand to fit arbitrarily large screens.
Here's a fairly minimal example of my layout:
https://codepen.io/Shepazu/pen/EwePgB
(Please note that the nested areas in the HTML and CSS are intentional, so any solution should be CSS only, and shouldn't change the HTML markup.)
Assuming the fixed height of header and footer is 100px, then give the style to the content area:
.center-row {
max-height: calc(100vh - 200px);
overflow-y: auto;
}
I need to place two repeated background images on the left and right border of a div. I don't know the width or the height of the div.
I though of placing the left border in the div, and floating the right border to the right.
This is my layout:
http://jsfiddle.net/WmLhV/
In Firefox it works ok, but in the other browsers, when the browser window is too short, and a scrollbar appears, the float disappears.
As you can see the container is of display: table-row. I cannot change this or the layout will break...
Is there any better way of putting an image to the right? even without a float?
your div with right align doesn't have height if you want to use 100% height you have to use position. check this fiddle i have done this via position http://jsfiddle.net/WmLhV/4/
Your <div> that's floated to the right doesn't have height. Firefox seems to understand the 100% height even when the contents of the <div> are empty but IE9, for example, doesn't.
One alternative approach would be to give your <div> that contains the text 60px padding-left and 60px padding-right, and then apply background images to it (note: multiple background images will only work in CSS3-friendly browsers). The padding essentially creates empty space for the your background images and always has the same height as the text.
A further, slightly more convoluted approach, would be to divide the inside area into three (left, middle, right) and setting display: table-cell (or using a table), and then essentially allowing the height of the left and right cells to adjust according to the height of middle cell which contains the text. This would reveal the background images on the sides according to the height of the middle text --- standard table behaviour. This would get rid of the need for floats. display: table-cell is not supported in IE6/IE7, but a normal HTML table would work fine.
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...