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>
Related
Update 2
Following #kidconcept's new update about using the table tag, I have modified it to make a centered
Table Timeline. Note: copy-pasting #kidconcept's into a local project (not on JS Fiddle) did not have this property. I also added css selectors to make changing direction easier.
Thank you for considering my question.
I am trying to make a custom row. What I want to achieve is describe in more detail under the headings description.
In addition I am including a JS Fiddle, which gets me close (maybe) to what I want to achieve (e.g. I put some work in).
I don't really get CSS3 that well, and the tutorials at W3-schools really only cover basics, however a deeper understanding of the difference between display options and what float actually does to the object is not readily given.
So I appreciate your assistance and am eager to learn from you :)
Description
JS Fiddle: A tri-element row with fixed size middle element
I am trying to make a row which contains exactly three elements. I want the middle element to have a fixed size and be centered. I want the other two elements (left / right) to have a fixed spacing to the middle element, but be responsive in size, see below:
In addition, I would like to stack these rows with a fixed spacing:
As well as be responsive to a small window size:
Update
Using the answer from #kidconcept you can make a reasonable timeline.
UPDATE: I think this is more easily solved with a table. Simply create a table with three columns and give a fixed width to the middle column.
<table>
<tr>
<td></td>
<td class="middle"></td>
<td></tr>
</table>
td {
background-color: tomato;
padding: 2rem;
}
.middle {
width: 10rem;
}
Table Fiddle
https://jsfiddle.net/botbvanz/2/
Problematic Flex method: flex. Learn more about flex here.
<section class="tri-element-rows">
<div class="left-element"></div>
<div class="middle-element"></div>
<div class="right-element"></div>
</section>
html, body {
height: 100%
}
section {
display: flex;
height: 50%;
}
div.middle-element {
width: 15rem;
height: 10rem;
}
div.left-element,
div.right-element {
flex-grow: 1;
}
div {
background-color: coral;
margin: 1rem;
}
To achieve the effect simply put three elements within a display: flex box. Set the middle elements width to be fixed, in this case 15rem. Then give the left/right elements flex-grow: 1, which indicates they should fill the remaining space equally. Give all the divs a fixed margin, in this case 1rem.
For the heights, I'm not sure I understood your requirements exactly, but if you want the height of the inner divs to respond to the window you can set their height to be a % of the parent container. For this trick to work you need to remember to set the height of html and body to 100% (this gives them something to be a percentage of. In this case i set the section-height to be 50%, which means that two rows will always fill the screen. One other gotcha is that if you set a padding or a border to the section element, the element will become 50% plus the padding and border. To avoid this, set box-sizing: border-box on the section tag.
Here is a fiddle: https://jsfiddle.net/ksgd6r11/
i would suggest use a framework
Bootstrap
Skeleton
and many more
It saves a lot of time and you can focus on logic
they all have offset as one of their classes
However how we achieve the same in Bootstrap is
<div class="container">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="col-xs-2 col-xs-offset-3 col-sm-2 col-sm-offset-3 col-md-2 col-md-offset-3 col-lg-2 col-lg-offset-3">
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"></div>
</div>
</div>
what it does it gives a padding left to the left most block
In your case.check this(jsfiddle)
or rather
div.block{
width:32%;
height:50px;
border:1px solid black;
float:left;
margin:2px;
}
div.block-2{
width:31%;
height:50px;
float:left; border:1px solid black;
margin:2px;
}
div.margin-l{
margin-left:50px;
}
div.section-2{
margin:0 auto;
width:60%;
}
<section class="tri-element-rows">
<div class="block">
</div>
<div class="block">
</div> <div class="block">
</div>
<div class="section-2">
<div class="block-2 ">
</div>
<div class="block-2">
</div><div class="block-2">
</div>
</div>
</section>
I agree with kidconcept that the flexbox flex-grow property is your best solution. This article is a good resource for getting started with flexbox. Some developers still shy away from the flexbox module, but it’s extremely useful and browser support is great. That said, in the spirit of trying to help you learn a bit more, I created something close to what you’re asking for using simple floats.
Fiddle
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
<section class="row">
<div class="left">
<p>Left</p>
</div>
<div class="right-block">
<div class="center">
<p>Center</p>
</div>
<div class="right">
<p>Right</p>
</div>
<div>
</section>
.row {
width: 100%;
height: 180px;
margin-top: 20px;
}
.left p, .right p {
padding: 0 30px;
}
.left {
height: 100%;
background: red;
width: 40%;
float: left;
}
.center {
width: 140px;
height: 120px;
margin: 0 20px;
background: #4FBA49;
float: left;
text-align: center;
}
.right-block {
height: 100%;
margin-left: 20px;
overflow: hidden;
}
.right {
height: 100%;
background: #FDCF1A;
overflow: hidden;
text-align: right;
}
On a more conceptual level, floats pull elements from the normal flow of things on the webpage, shifting them to the left or right and allowing text etc. to wrap around them. Honestly, they’re not all they’e cracked up to be imo and I’ve always found them an imperfect solution. This article gives a helpful overview of floats.
You may also find this answer helpful in understanding how to use floats together with overflow: hidden property, a useful concept that I used in my Fiddle. Finally, you'll probably also benefit from reading up on css grids as well, especially in the context of Bootstrap or some other framework. Hope this helps!
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/
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 been through a number of similar questions, and tried to adapt the solutions to my case, but haven't had success in doing so.
I am trying to implement something of a reader, so I have a reading pane which I want to center on my page. I want to limit the size of the pane so that the user is no reading lines spanning the full width of a large browser window, but I also want to have that pane centered in the window. Above the pane I have a header which spans the full width of the page.
Originally I tried to use "span8 offset2" for the reading pane, but as the size of the window is reduced, I want the margins to disappear before the pane shrinks, and using this setup, the reading pane shrinks unnecessarily, squeezing content, as the window is made thinner.
I get the correct behavior just using "span12" with "max-width: 700px" set, in terms of the reading pane shrinking as I want it to, but I cannot get the div to center on the page.
Here is what I have that I'm working with:
<body>
<div class="container">
<div class="row-fluid">
<div class="span12 reading-pane">
<div class="row-fluid">
<div class="nav">
<div class="span6 offset3">
Main Navigation
</div>
<div class="span2 offset1">
Nav2
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="body-text">
Text Area
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The style for the reading-pane is as follows:
.reading-pane {
border: solid;
border-color: #ccc;
border-width: 3px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
min-height: 40px;
line-height: 40px;
max-width: 700px;
}
I have tried adding the following to the .reading-pane style (individually):
float: none;
margin-left: auto;
margin-right: auto;
margin: 0 auto;
float: none;
margin: 0 auto;
I've also tried centering text in the container which centers my header text, but not the reading-pane.
So how do I get the span12 div to center on the page?
I'm assuming since you're using row-fluid that you're using bootstrap 2.0. Bootstrap 3.0 handles responsive grids a bit more cleanly, so if you can I'd recommend using 3.0.
Then move your max-width to the container:
.container {
max-width: 700px;
}
Note that 700 includes the gutters so you may want to use 730.
Or better than using max-width, you can customize (http://getbootstrap.com/customize/) your twitter bootstrap download and define your own widths there if 700 is critical to you. And you can then also remove the larger #media queries then.
There's a few other tweaks to how grids are done on 3.0, which I included in this fiddle: http://jsfiddle.net/PQM34/2/
Hard to gauge without an example of your code and Bootstrap's source...
Note, it sounds like your using the framework incorrectly though. Why not just use span10, span8, etc. and center that?
In order to center divs, using margin:0 auto a fixed width is required (%, px, em, etc.).
Try adding this css to .reading-pane:
position:relative;
margin: 0 auto;
width: 700px;
float:none!important;