I am using css to design in my WooCommerce site. My page look like this
My code like this
<div class="row">
<div class="col-md-3">Stenner Tube Assemble column.......</div>
<div class="col-md-3">Image with buy now column....</div>
<div class="col-md-3">Image with add to card column....</div>
<div class="col-md-3">videos and tags column....</div>
</div>
<div class="row">
<p>In many industrial application ...</p>
</div>
I want bottom space at first three column should be filled with description which is on next row div.
I tried with different css properties such as, position, margin, flex, padding etc, but not got result.
Is it possible in css or any other way. So extra white space covered with text.
Thanks
Related
I am trying to get the sidebar to be on the left side of the content and instead the two components stack on top of each other.
the html I am using to style
<div class="bg-gray-600 flex flex-col max-h-min">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div class="flex-row">
<div class="bg-blue-500 col-span-1" id="module-display">
<app-module-display></app-module-display>
</div>
<div class="bg-yellow-200 max-w-min flex-col" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
</div>
</div>
The Output
Picture of the output
I want the black box to be all the way to the left like it is, but the top to be the max-h-screen. Then I want the blue box to be to the right of the black sidebar
I see that you're making use of flex layouts - that's good and, once you have them figured out, makes sorting page layouts so much easier. I highly recommend using Angular-flex so that you don't have to play with styling directly, and it makes it easier to read.
An approximation of what you want - written using Angular-flex directives because that's what I can provide faster. Also, as I'm not entirely certain what each of your components relate to (other than the app-course-sidebar, I'm using placeholders).
<div class="bg-gray-600" fxLayout="column" fxLayoutAlign="start stretch">
<div>
<app-course-info-home></app-course-info-home>
</div>
<div fxLayout="row" fxLayoutAlign="stretch start">
<div class="bg-yellow-200" id="course-sidebar">
<app-course-sidebar></app-course-sidebar>
</div>
<div fxFlex class="bg-blue-500" id="module-display">
<app-module-display></app-module-display>
</div>
</div>
</div>
This layout should look something like
------------------------------------
[course info]
[sidebar] [-----module display-----]
------------------------------------
Note that the biggest change is in where your sidebar is within the template. Row layouts, without setting specific orders, are basic left-to-right one-after-another layouts. So if you want your sidebar on the left, put it as the first child.
The root div is column layout, so the course info div will be placed above the grouping div.
The grouping div is row layout, so the sidebar and module display child divs will be displayed besides each other.
The module display div makes use of fxFlex to make it take up whatever space it has available for width, pushing the sidebar to the left so much as it's able (control how severe that is by setting a min-width on that sidebar if you don't want it to look too squished).
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I am doing a products page using Bootstrap and most of the images appear fine, but the last line on the two bottom rows checker in a smaller screen size.
To let you know what I mean I've included an image here.
Here is the code of one of the rows that are not working right:
<div class= "row">
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_1.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_2.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_3.jpg">
</div>
<div class="col-sm-6 col-md-3">
<img src="images/seasonal_4.jpg">
</div>
</div>
This usually happens when you have some padding or border that is increasing the size of the element.
Grids work on the basis of % so if you have 2 elements that width each equal 50% but then you add something like some padding or a border you are going over a total of 100% and the element is pushed to the next line.
My advice (given I don't have the actual code) would be to review your styles using the browser dev tools to see what styles are being applied when this happens. You should be able to track down the offending property.
Hope this is useful even if not a definitive answer.
So I eventually fixed the problem by making the all the images the exact same size/dimensions (some were a few pixels off). Just thought I'd follow up on this.
Also I later discovered that if you have an extra line of text or two underneath the picture that might throw the pattern off.
I'm creating a PDF from HTML (using wicked_pdf) with multiple envelopes for printing. Each page(envelope) can have elements positioned based on the users requirements.
The trouble is getting the CSS right such that page-break-after and absolute positioned elements on each page are displayed correctly.
Here's a simplified example:
<div class="page" style="position:relative;background:red;min-height:1px;">
<div style="position:absolute;top:50px;left:0">
Address Alpha
</div>
<div style="position:absolute;top:80px;left:0">
Beta
</div>
</div>
<div style="page-break-after: always;"></div>
<div class="page" style="position:relative;background:green;min-height:1px;">
<div style="position:absolute;top:50px;left:0">
Address Gamma
</div>
<div style="position:absolute;top:80px;left:0">
Delta
</div>
</div>
This produces the following output as seen in the image:
The text "Address Alpha" should be 50px from the top of page one although it appears on page two. How can I have multiple absolute positioned blocks on each page?
For the class page you are giving only min-height.I suggest to give fixed height and width so that div with class page wont overlap.I think it will solve your problem.
What is the expected behaviour of the following?
<div id="navi" style="float:left;width:230px">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<div id="content" style="float: left">
<div id="diagram" style="float: right"><img src="..." /></div>
<div id="text">
<h1>...</h1>
<h2>...</h2>
<p>...</p>
</div>
</div>
I am trying to create a 2 column page with a nested 3rd column in the content div floating to the right to show a diagram image.
However, the browsers rendering for all chrome, ff and ie seems to be inconsistent. Since the <p> content is a lot, it can fill a wide space even on a 24" wide screen. Depending on which monitor/resolution I open the browser in, the browser may either render 3 columns (desired) or the navi on top and the content div below with the text and diagram side by side.
How can I make it consistently show 3 columns without using a table and have the text div have "fluid/spring width"? preferably just div and css positioning.
You have to assign width as a percentage (you can always use even min-width for set the minimum width of the page and avoid wrong views)
I am sure this is what you want to achieve please view it at jsFiddle