I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.
CSS
.small_banners .banner_block {
display: block;
max-width: 100%;
height: auto;
width: 24.96%; }
.small_banners {
float: left;
clear: both;
width: 100%;
margin: 0 0 15px; }
HTML
<div class="small_banners">
<div class="banner_block">
<div>
Content
</div>
</div>
<div class="banner_block">
<div>
2nd piece of content
</div>
</div>
<div class="banner_block">
<div>
3rd piece of content
</div>
</div>
<div class="banner_block">
<div>
The 4th piece of content
</div>
</div>
</div>
When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: #media all and (max-width: 958px) {
this should work.
#media (max-width: 958px) {
.small_banners .banner_block{
width:50% !important;
}
}
Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.
https://jsfiddle.net/evc670st/1/
Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.
Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
Working in a Wordpress post, I want to add two images side-by-side and keep the block of images centered (one is aligned left, the other right). (That on its own I've got.)
When the page size is smaller, I want the images to stack. (That I've got.)
But the images aren't then centered in the page in this responsive mode. First one is left and the other right.
I've played with different image alignments through WP, but I can't get the combination to work.
Here's my html:
<div class="ps-image-container">
<div class="ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
and css:
.ps-image-container {
display: block;
/*width: 98%;
margin: 0 auto;*/
}
.ps-inner-image-container {
/*display: block;*/
width: 98%;
margin: 0 auto;
}
.ps-image-container::after {
content: "";
display: table;
clear: both;
}
.ps-responsive {
width: 49.99999%;
float: left;
}
#media only screen and (max-width: 500px){
.ps-responsive {
width: 100%;
}
}
There is some key concept that I'm missing.
If I understand your goal correctly, you want to do two things with your responsive layout:
Switch the image containers (.ps-responsive) between 50% and 100% widths so they go from being side-by-side to stacked (they can stay floated left)
Switch the text-align property of these containers between left/right and centred so the images inside them will go from the inner edges of these containers to the center.
It looks like you're close but you don't need so much code. See this fiddle for a working example: https://jsfiddle.net/ds2vuqng/26/
You can clear the float's in css by:
clear:both;
You can also use Bootstrap to fix this and using the container and text-center as a part of you class in ps-inner-image-container like:
<div class="row ps-image-container">
<div class="container text-center ps-inner-image-container">
<div class="ps-responsive">
<img src="https://passports. ... " class="alignleft" />
</div>
<div class="ps-responsive">
<img src="https://passports. ... " class="alignright" />
</div>
</div>
</div>
I'm not sure if this will fix your problem otherwise write again :-)
I'm using the Avada Fusion Theme so I have limited access to editing the core theme HTML files.
I do however have access to Custom CSS.
I'm having trouble making the below columns display as 2x3 instead of 1x6 on mobile only under 800px media screen:
IMAGE showing mobile view of issue
Here is the page that is displaying the issue (20th Jun 2017) be sure to switch to mobile view:
https://zeralynx.co.uk
Here is the CSS I'm using, all 6 of the columns have the same ID selector "home-product-tiles":
#media only screen and (max-width: 800px) {
#home-product-tiles {
width: 47% !important;
display: inline !important;
float: left !important;
margin-right: 2% !important;
overflow: hidden !important;
}
}
I can't figure out why the 4th column (which is the first in the second row on desktop view) won't float to the right of the 3rd column (which is the last in the first row on desktop view).
Please help me, I'd be most grateful, I bet this is so simple to fix!
Regards,
Zach
That's because your columns are not equal in height. Also do not use both display:inline and float:left . They are essentially doing the same thing.
You can use display:flex to equal the height of the columns. See the example snippet below
wrapper {
display: flex;
flex-wrap: wrap;
}
div {
float: left;
width: 49%;
margin-right: 2%;
display: inline;
}
div:nth-child(even) {
margin-right: 0;
}
<wrapper>
<div>
<img src="http://via.placeholder.com/350x150">
<h2>
Some text
</h2>
</div>
<div>
<img src="http://via.placeholder.com/350x250">
<h2>Some text</h2>
</div>
<div>
<img src="http://via.placeholder.com/350x50">
<h2>Some text</h2>
</div>
<div>
<img src="http://via.placeholder.com/350x450">
<h2>Some text</h2>
</div>
<div>
<img src="http://via.placeholder.com/350x150">
<h2>Some text</h2>
</div>
</wrapper>
SOLVED
Thank you Mihai T and CBroe.
I applied the below ID "home-product-tiles-wrapper" to the Avada Fusion Container that held the 6 columns, then added in the display: flex & flex-wrap: wrap as below.
#media only screen and (max-width: 800px) {
#home-product-tiles-wrapper .fusion-row {
display: flex !important;
flex-wrap: wrap !important;
}
#home-product-tiles {
width: 48% !important;
margin-right: 2% !important;
float: left !important;
display: inline !important;
}
}
This is what it was like before which wasn't what I needed:
SCREENSHOT BEFORE
It now displays as I want it to like in this screenshot:
SCREENSHOT AFTER
Thanks again!
When resizing the page to a smaller width, I want the three col-# divs to stack on top of each others only after a certain point. As it is now, the col-3 div goes immediately under as soon as I resize the page; and col-2 readjusts the <h3> and <p> texts until its width is 301px and then stacks under also. What determines these 'stacking points', so I can control them? I can not find the property.
PrtSc: columns stacking
(Before I had all 3 columns' widths with percentages (25%, 50%, 25%) and the contents overlapped when resizing the screen)
<!-- HTML starts here. This inside a colophon a footer -->
<div class="engage-row">
<div class="col-1">
<img src="">
</div>
<div class="col-2">
<h3>
</h3>
<p>
</p>
Signup Form
</div>
<div class="col-3">
<img src="">
</div>
</div>
<div class="footer-wfix
</div>
<!-- HTML ends here -->
/* In CSS, in the child-theme I have this */
.engage-row:after {
content: "";
display: inline-table;
clear: both;
}
.col-1{
float: left;
width: 301px;
}
.col-2{
float: left;
width: 50%;
padding: 10px 20px 0px 20px;
.col-3{
float: left;
width: 301px;
}
.footer-wfix {
clear: both;
}
Thanks.
Here's a Bootply with working stack examples along with the pixels at which they stack. This is designated by the screensize column modifiers (more on that below).
http://www.bootply.com/ygqBb2GxrV#
You wan't to wrap everything that's stackable in it's own "row"-classed div. Then use the screensize modifiers on the column classes (i.e. col-md-5)
xs - extra small screen
sm - small screen
md - medium device
lg - large screen
I have a two column layout, one column is the document content and the other is the navigation. I've set this up using a Bootstrap row, one column is 8 units wide and the other is 3 units wide with an offset of 1 unit. I've set the navigation content to fixed so that it stays on the page.
On some of the pages I want to have an image at the top of the navigation column. I want this image to be responsive and stay within the 3 unit column and be fixed along with the navigation. However, when you set the content to fixed the image is no longer constrained within the 3 unit column.
I've set up a jsfiddle of the problem at http://jsfiddle.net/yKUZW/3/.
Here is the example html:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content goes here...</div>
<div class="col-xs-3 col-xs-offset-1">
<div class="fixed">
<img class="img-responsive" src="http://placekitten.com/300/200">
Some links go here.
</div>
</div>
</div>
</div>
And the relevant css:
.fixed {
position: fixed;
top: 150px;
}
Notice that when the page is resized horizontally the image stretches outside of the light grey container area. What I want is for the right hand side of the image to always align exactly with the right hand edge of the container, resizing the image as needed.
How would I go about accomplishing this?
The Problem
Ignore the image for a second... .img-responsive just makes the image take up 100% of the available space in the parent container.
Then the question becomes, can I add position: fixed to a div and still have it take up the same width as it's parent which has .col-xs-3 (width: 25%)? Once we resolve that, the image should fall into line.
As you may already know about fixed positioning:
for a fixed positioned box, the containing block is established by the viewport
Meaning Fixed is always relative to the parent window, never an element.
Simple Solution
If the viewport is the same width as the parent div, this can be resolved trivially:
HTML:
<div class="row">
<div class="col-xs-9" id="content">C</div>
<div class="col-xs-3">
<div id="navbar">Navbar</div>
</div>
</div>
Relative - div takes up 100% of width of parent (.col-xs-3):
#navbar {
background: yellow;
position: relative;
}
Fixed - div takes up 100% of screen - apply .col-xs-3 width ourselves:
#navbar {
background: yellow;
position: fixed;
width: 25%;
}
Demo in Fiddle
Better Solution
However, that solution isn't much help to us because the the .container class applies variable widths at different breakpoints to the row. This causes 25% of the parent div and 25% of the viewport to get out of sync.
So how can we get them to sync up again?
To answer that, let's look at exactly what .container is doing:
.container {
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
So instead of trivially being able to apply a 25% width, we now have to mimic the width applied by .container. Here's how:
Here's some sample markup:
<div class="container">
<div class="row">
<div class="col-xs-8 content">Content</div>
<div class="col-xs-3 col-xs-offset-1" id="sidebar-outer">
<div id="sidebar">
Width: <span id="width-placeholder"></span>px
</div>
</div>
</div>
</div>
Now we can apply a width at all breakpoints with the following CSS:
#sidebar {
background: yellow;
position: fixed;
width: 25%;
}
#media (min-width: 768px) {
#sidebar {
width: 158px; /* 632 * .25 */
}
}
#media (min-width: 992px) {
#sidebar {
width: 213px; /* 852 * .25 */
}
}
#media (min-width: 1200px) {
#sidebar {
width: 263px; /* 1052 * .25 */
}
}
Here's a side by side comparison of using relative vs fixed position with styling:
Demo in Fiddle
Back to our problem at hand:
Just take the demo from above and add back in our responsive image:
Solution Demo in Fiddle
As a note: most sites opt to use a fixed width side navbar when using position:fixed in order to sidestep these kinds of issues.
After messing with it a bit I believe the best way would be to remove the the fixed div from the bootstrap column, and place it higher up in the dom, or at least outside of the row. There is a lot of negative margin and strange padding stuff going on to get the BS cols to work properly and it is pushing your fixed div around. If it were me and this was going to be a main feature on the site I would make a div with width 100%, abs pos, top left right bottom all at 0, and then place the fixed div inside of that. For a fixed pos div you want it to live in a relative pos parent with right set to 0 and top set to 150 in your case. If the parent is 100% of the windows width then you have pretty good control over where it goes using either px or %.
Thanks Kyle for the amazing solution you described at the top.
Here is a solution for 8/4 situation in a normal container (not fluid)
<div class='container'>
<div class='row'>
<div class='col-xs-8> something here </div>
<div class='col-xs-4>
<div id='sidebar'> content
</div>
</div>
</div>
</div>
and here the css
#sidebar {
background: blue;
position: fixed;
width: 33.3333%;
}
#media (min-width: 768px) {
#sidebar {
width: 235px;
}
}
#media (min-width: 992px) {
#sidebar {
width: 309px;
}
}
#media (min-width: 1200px) {
#sidebar {
width: 375px;
}
}
http://jsfiddle.net/zEcn3/12/
I'm trying to get a div content that resizes to the number of divs that fit in a line. So the example works fine when the window is bigger than all the item divs combined so they're all in a row, but when the window is resized smaller so one of the items is reflowed to the next row, the content div's width is 100% instead of shrink wrapped.
The reason I want this is so I can have centered content with a menu bar above the content that shrinks to the size of the combined reflowed content.
HTML:
<div class="wrapper">
<div class="content">
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
<div class="item">Hello.</div>
</div>
</div>
CSS:
.item {
float: left;
width: 70px;
border: 1px solid black;
}
.content {
display: inline-block;
border: 1px solid black;
}
.content:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
A friend figured it out for me, the answer is to use media queries.
#media (max-width: 1080px) {
#main {
max-width: 640px;
}
}
So I set at the intervals of the width of each item div, so when the viewing window is smaller than a certain number, it sets the width of the container to the next level down.
I'm not quite sure if you were trying to remove the 100% width on the container, or just have the container shrink along with the content, depending on the size of the screen.
The problem, as I see it, is that when I shrink the screen, the last "Hello" on the right side gets pushed down to the next row.
So what I did is set 100% width to the wrapper. I then just removed the fixed width from the items and changed it to % widths. In this case I took the number of boxes and divided them into 100%, which was 20% each (but with 1px border I reduced to 19% each). Also, I added display:block; margin-left:auto; margin-right:auto; to the id="content".
Here's the link to JS Fiddle: http://jsfiddle.net/rm2773/Lq7H7/
I found the answer here:
http://haslayout.net/css-tuts/CSS-Shrink-Wrap
It basically amounts to using display: inline-block; on the block element you want to shrink to fit its contents.
Try to use margin:auto to the container <div> and set a fixed position.