I'm trying to use Bootstrap 4 Progress component. I need it to be between words in a sentence. As it is designed to cover the whole row, I'm trying to make it a smaller block so that I can put it between words. I minimized the size changing its width, but for some reason, it still has margin, but the developer tool shows there is no any margin.
I don't know how I can handle the margin thing. Is there anything hidden configuration from Bootstrap 4?
Weird. I didn't see the margins you mentioned on my developer tool.
Anyway, if you want the progress bar to be between words, you can set its display: inline-block;. Optionally you can assign a width to it as well:
span.progress {
display: inline-block;
width: 12rem; /* optional */
}
fiddle: http://jsfiddle.net/aq9Laaew/255749/
Related
I'm designing a homepage in which I'm trying to display the same image 4 times in a single row (to make a kind of decorative banner). I have set each images' width to take up 25% of the screen. Theoretically, this means each image should take up a quarter and fit perfectly within a single row. However, I suspect Bootstrap is adding some kind of spacing between my images causing the 4th to spill over into the next one.
I have tried setting their margin to 0, setting their padding to 0, and setting their border-style to none. I figured setting the properties this way would override any defaults Bootstrap might place on the <img> tag, but this spacing does not seem to be going away. Additionally, checking the Developer Tools on my browser confirms that there is in fact no margin, padding, or border affecting my images. I'm not sure what else I can target to try and resolve this issue.
Any advice would be greatly appreciated. Thank you for your time in advance.
NOTE: I am not using Grid. I figured what I am attempting to do is simple enough to avoid having to use it.
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
<img class="back-banner" src="pictures/walyn-homo-erectus.jpg">
.back-banner {
width: 25%;
opacity: .5;
padding: 0;
margin: 0;
}
Image is inline element by default. This causes it to add some white space. You can transform it to block element by using display: block, but then you need to use float: left to make them appear in one row.
Even better is to use modern css like flexbox by adding display: flex on wrapping element.
I'm creating a basic web layout in CodePen to better understand how grid areas work with the CSS Grid module. It turns out that using the . notation doesn't actually "hide" the items, when applied to the grid-template-areas property.
Please see my code here: https://codepen.io/isaacasante/pen/KZmyKV
You can see that I'm leaving the grid cells below my menu empty, but the section element on which I've added grid-area: random still shows in the bottom right corner of my layout (below my footer).
Do you guys have any idea how I can get rid of it without removing the HTML? I want to use Grid Areas only, to hide it. I noticed that an easy solution is for me to set the padding on the section element to 0, but this isn't a good solution, because it won't work the next time I'm trying to "hide" an element that has content.
You could reset the grid-templates-rows to grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj But that is when you know it is empty or is to be hidden any times.
Instead you can use :empty and auto. https://codepen.io/anon/pen/NXjyLV so it is hidden only when empty.
In fine, the grid-gap remains visible. It can be reset to 0 and margin on .item might help along the :empty selector and auto value for this specific row:
https://codepen.io/anon/pen/NXjyLV
Use display: none:
section.item {
display: none;
}
JSFiddle
I am trying to figure out how to do something which is quite hard to explain. I have set up a test here
When you visit that site, you will see I have a left and right column. The left column is fixed into position, and when you scroll down, only the right column scrolls. I have put some colourful images in there to show this happening.
What I want to do on the right hand side is have two images side by side, rather than one below each other. To achieve this, I can do
.project {
float: left;
width: 50%;
}
This now displays the images how I want them to display.
However, if you scroll now, you will notice that the left section scrolls down to the bottom instead of staying fixed like it was before.
How can I make the change I am after whilst keeping the left section the same?
Thanks
Maybe instead of changing your .project, you can change the styling of the list elements that contain the project pictures.
I added display: inline-block; to the list using the browser developer tools. It looks like the effect you want.
Edit1: I also added width: 49%;.
New picture:
Edit2: If you must have no spaces between those colorful box things, then using flex is a good way to do that.
To the parent tag (<ul>), you add styling to make it a flex with row wrapping. Then you can set the child's width to 50%.
According to Chrome's developer tools, this should be added around styles.css, line 3238.
nav > ol, nav > ul {
display: flex;
flex: wrap;
}
Note: this will work for at least both inline-block and block child elements.
You have some JS that is removing the class 'title--fixed' from the left hand panel on scrolling, which means it loses the position: fixed. If you add position: fixed to
.chapter .chapter__title {
position: fixed
}
That should resolve
Currently trying to find a clean solution for achieving the following layout for a sidebar like this
Header
Section 1 that updates it's (dynamic) height aligned to the content
Section 2 that takes the rest of the height with content that needs to scroll if it doesn't fit anymore
Footer
How to make Section 2 taking the remaining space between Section 1 and the footer as nothing I tried makes it happen?
#data_section {
/*Section 2*/
position: relative;
background: red;
/* This needs to be 100% of the 'reset' excluding the footer */
/*height: 100%;*/
/* he content needs to scroll if it outgrows the height */
/*overflow-y: scroll;*/
}
Is there a CSS only solution for this kind of layout that works on >= IE9 and current FF, Chrome, Safari versions?
As it is part of a JavaScript centric application nothing speaks against using JS to calculate the dimensions. But as I always have a hard time when it comes to CSS and it's capabilities it would be nice to see if there's a "clean way" in doing by CSS only.
Here's a fiddle with the barebones layout without getting Section 2 to do what it should.
I would suggest using display:table; and display: table-row. The nifty thing with these display types is that the rows will both try to fill the entire table as well as fitting the content inside. Because of this, you can set height: 0; to the rows that you want to merely fit the content, and let section 2 just fill the rest.
Here's a fiddle
Assuming that you have no content as per you Fiddle, my suggestion would be to add :padding-bottom : 90%; // adjust the value to your need to your css in #data_section, as this will mark up the color in entire remaining area without affecting the footer!
I have a %-based grid with a fixed-width (for the moment). The code is based off of this css-tricks article: http://css-tricks.com/dont-overthink-it-grids/
Works great until I have a column that has multiple responsive images in it that are the same size and need to be stacked next to each other (floated). Because of padding issues and what-not, I can not get all three images to come out the same width and height, despite the fact that they start that way. The last one is always taller. Here is a codepen showing the issue: http://codepen.io/joshmath/pen/dEuIv
Any help with this would be really appreciated. I've run into this issue before and always just end up hacking my way through it on a case-by-case basis. Thanks!
For whatever reason, if you remove the padding-right: 0 style from the last element, it fixes the issue.
It looks like you're trying to add spacing between the elements using padding. What I tried instead using the Chrome dev tools was to use a margin instead of padding, and then slightly reducing the width of your elements to around 29.5%. That seemed to work.
just add the following to your css. set the size to whatever you like and all images within your grid will remain that size, if they need to grow / shrink use height/width percents instead.
.grid img
{
width: 350px;
height: 400px;
}