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
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 have noticed, that many websites (SO included) don't shrink to the whole width of the screen, preferring to render content column either of fixed-width or setting max-width property for it. Merriam-Webster dictionary website is a good example for the latter.
Is it possible to create such a layout using Bootstap? I have managed to limit content column width inside it's col-8-md div, but there is a huge gap between content and right sidebar on big displays now.
Live demo: https://codepen.io/anon/pen/dNprzm
HTML:
<div class="row">
<div class="col-md-8">
<div class="content-block">
CONTENT
</div>
</div>
<div class="col-md-4 right-bar">
RIGHT_BAR
</div>
</div>
CSS:
.content-block {
height: 1000px;
max-width: 1000px;
background-color: lightgreen;
margin-left: auto;
margin-right: auto;
}
.right-bar {
background-color: pink;
width: 400px;
}
If I'm understanding your question correctly, you just want to be sure to have a fixed width for your content but get rid of the space that's happening to the right of it on large screens?
Remove your margin-right: auto;. Once you get to a screen size where it's larger than 1000px, it's trying to "center" your .content-block
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/
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;
}
}
How can i change the width and height of each individual widget i've add to the bottom of my footer. http://jjabaird.virb.com/
For example, i have 3 widgets and each widget is set at 320px, i would like one of those three widgets to be 960px and another a different size.
Any help would be greatly appreciated!
in your code
<div class="wrapper">
<article class="widget rss">
</article>
<article class="widget blank">
<h2>Bleh</h2>
<p>Testing Testing Testing</p>
</article>
<article class="widget blank">
<h2>Bleh 2</h2>
<p>testing testing testing</p>
</article>
</div>
and css:
.wrapper {
max-width: 960px;
padding: 0;
margin: 0 auto;
}
.widgets article.widget {
margin-bottom: 20px;
width: 31.3%;
float: left;
}
the containing div wrapper has a max width of 960px.. at the same time each widget it contains has a width of 31%.. so if you change the width of the first widget to 320px.. then the other two will bump down.. (b/c they are all set to float: left).. so what you want to do is increase the size of the first to 320px, but also adjust the sizes of the other two so that they are small enough to be contained within the wrapper div
ie the total of widths must be <= 960px.. (and you have to also take into account the widget's margins and paddings when you do your calculation)
but if you just change the width of the first widget to 320px and leave the other two.. you'll end up with
(320px + .31(960) + .31(960)) > 960
hope this helps
Are you saying that you didn't do that website? In what i see, the width of the widget is 31.3%, and the three widgets Plus their margins make it 100%..
if you want to change it, you can override in css it by adding width: 320px !important;
try this
.widgets article.widget {
float: left;
margin-bottom: 20px;
margin-right: 15px;
width: 310px;
}
three widgets 310*3=930 and margin-right:15px; 15*2=30 so 930+30= 960.
and third widgets give float:right;
<article class="widget blank" style="float: right;">
<h2>Bleh 2</h2>
<p>testing testing testing</p>
</article>