I have a navbar at the top of a page, in a fluid container, now I want to fill the remaining space below (responsively) with another fluid container that wraps an SVG element. I can size the bottom container with container-fluid full and I can insert two rows row half, or one row with row half, but ideally, I want to be able to put a single row with row full but this doesn't work.
My plan is to use the height of the row to define my svg element height.
How can I do this so I maximise the svg size without scroll bars appearing?
Related
I'm trying to achieve the below layout.
I have a region that, ideally, fills most of browser's height; I want it all within view, with a potential minimum height. On the left is an image that stretches to fill the area, with the aspect retained, but will not go beyond a maximum width. On the right is a div that takes up the remaining space.
I can't figure out the HTML and CSS flex-box styles that would achieve it.
I am using Bootstrap. I have div with class="row" and three columns inside with divs in each column.
The third column overflows outside the row div, which could be fixed by giving padding-right to row div. But it still repeats when resized to smaller size.
While resizing from md to sm to xs, the column divs overlap during the transition.
How do I fix this?
If all of your columns (col--) add up to 12 you should be alright. If it's an image that's overflowing (which it sounds like it is) you can add the img-reponsive class to it. This will set max-width: 100% which sounds like the issue but I can't be sure without a code sample.
I have a 3 column div layout and the 3 columns look fine. I'm listing items in each column however i'm having to set a min height for the blocks in each column and if the min height isn't big enough then on the next 'row' there is just a space.
However by setting a min height it means that there is a huge gap below the top row item if it's not as tall.
Is there anyway around this?
Site is here - https://steve-morris.co.uk/properties/rent
Each block has a gap below it and when the block isn't tall there is a bigger gap. I'm wondering how I set it so that instead of using a min height, the next row auto adjusts to the height of the tallest block in that row.
You could set .prop-list-title {min-height:290px}. It looks like the title is the only area where the text wraps. Because it's responsive you would want to make sure you set that rule in the proper media display in your css.
You can use some JS to determine the height of the largest box of the row and add a uniform height to all elements within the row.
Have a look at this: http://www.jainaewen.com/files/javascript/jquery/equal-height-columns.html
FIRST ISSUE:
Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.
I assume that in order to make this I have to use container-fluid and I'm using it like this:
<div class="container-fluid">
<div class="row">
<div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
</div>
</div>
When I check this in the browser:
It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.
Is this the normal way of doing this?
SECOND ISSUE:
Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.
Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?
In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.
The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.
The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.
The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.
So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.
In bootstrap you need the following structure:
<div class="container-fluid">
<div class="row">
<div class="col-xx-xx">
...content goes here...
</div>
</div>
</div>
The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.
The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.
The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.
The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.
So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.
EDIT
As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:
Use a container with the class of jumbotron as follows:
<div class="jumbotron my-own-jumbotron">
...content goes here
<div>
Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:
https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/
The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.
I found that this way, it is not necessary to use the .container-fluid div.
I have an HTML page with a section across the middle of it. This horizontal section uses a <table> and has a custom background image that needs to repeat horizontally across the entire section. This table has 5 elements in it. These elements are statically sized to 140px.
My problem is, I can't get the image to repeat across the remaining space. It's as if the table doesn't stretch the entire width. However, if I set the table width to 100%, the table cells grow beyond 140px.
What do I do? I want the table to fill the entire space. But I want my cells to remain a constant size, and I want the background image to be used.
Thank you!
A <table> is only as big as the cells inside it. So, if you’ve got 5 cells, each 140 pixels wide, the table will only be 700 pixels wide: it won’t stretch across the full width available to it.
You could wrap the <table> in a <div> and put the repeating background image on the <div>, if the 6th cell solution doesn’t work or isn’t preferable.
The sizes of background images are irrelevant to CSS, no help there. Maybe you can hack something in JavaScript, otherwise you will have to know how large your background image is.
Consider wrapping the middle section in a div and applying the background image to the div. Then set the width of your td elements in the table to 140px.
Here is an example. Clearly, you will need to reference your image instead of flurries.png (which is not part of the fiddle so it does not show).
Add a 6th cell and don't specify any width. This will keep the 5 cells at 140px and the 6th cell will be stretched to the end when table width is set to 100%.