the code is not so small to paste it here, so I'm including a codepen link,
but I'm sure its easy to read and understand.
The Problem is: There's extra empty space below body and I learned that it's caused by the body not expanding to fit in the itemsbox div's 10% margin on top and bottom, I want to know why it is not expanding and what can be done to make it expand so as to fit the itemsbox including it's margin.
Additional info: The body expands to fit itemsbox including it's margin on top and bottom if there's 3 or more rows of products in the itemsbox excluding the productdummies, you can copy the following product code and add it before the first productdummy, to see this in action.
Add 5 copies of this code.
<div class="product" id="2155640">
<div class="product-imagecontainer"><img class="product-image" src=""></div>
<p class="product-name">Ninja Melk</p>
<p class="product-price">$24</p>
<button class="product-button-addtocart" onclick="addtocart">Add To Cart</button>
</div>
no needed of line min-height in #itemsbox
and remove two line in file html
<div class="product product-dummy"></div>
<div class="product product-dummy"></div>
Related
This is a continuation of a small project I started on over the weekend (I raised a query re H1 header size). I've got this as far as I want to take it at this stage (simple to-do list - non-functional at the moment). I added a navbar and designed an imported my own logo (in the menu bar and at the bottom of the screen). I've included the code from a codepen but for some reason (not sure at the moment) it hasn't pulled through the background colour and logo PNG hence why I've included a screenshot too.
However, the issue is that I cannot locate where I'm going wrong with regard to the containers not lining up: you can see the first two containers (with one row each - with the ADD rect which I'm going to change to a box and the 'You have '3' complete tasks:" rect box) then the five containers/rows below that are offset from those above.
The code for the "container-row-col" is (as far as I can tell) the same, but would placing all these rows in one container (containing all the 7 rows plus their columns) make a difference?
Maybe the media queries need to be looked at?
<div class="row">
<div class="col-8 col-md-6 white-rect mr-4 mb-2 ">|.............................................
</div>
<div class="col-6 col-md-4 white-rect center-block">ADD</div>
</div>
</div>
Here's a snippet of the container-row-col code with a codepen link below. I can only apologise for the amount of commenting out I've done...part of my learning process I guess.
Many thanks.
Codepen
Screen Shot of Full Page as it appears in my browser
You have too many nested containers. Just put all your .rows into one parent .container or add some style to the nested .containers witch will remove the extra padding. Something like this:
.container .container {
padding: 0;
}
What I want to do is basically this
But for this solution to work, I need to specify the height of the div, but the div needs to fill all the remaining height, so I found this
the issue is: each answer works separately, but both together seems to not work.
Here's what I have:
<body>
<div id="master-page">
<div id="some-unknown-size-content"></div>
<div id="separator"></div>
<div id="sub-master-page">
<div id="more-unknown-size-content"></div>
<div id="another-separator">
<div id="scrollable-content-taking-remaining-space">
<!-- content -->
</div>
</div>
</div>
</body>
The master-page have an asp:placeholder which is replaced by div sub-master-page
The sub-master-page have another asp:placeholder which is replaced by div scrollable-content
I don't know if i understood your question correctly or not.
You can use following jquery code to calculate and assign remaining space
var remaining_space = $('#master-page').height() - $('#some-unknown-size-content').height()-$('#more-unknown-size-content').height()-$('#separator').height();
$('#scrollable-content-taking-remaining-space').css('height',remaining_space+'px');
you can go to following link to see it in action:
https://jsfiddle.net/fq7bgo4w/
I am trying to create an HTML,which should look as follows:-
I am able able to make it but i have a very specific requirement to make it such that when the font size of the first div increases(ie "Gross margin amount'),the div should wrap the text inside it.
But when the font-size of the same increases i get output like follows
Here is my code
<div style="width:132.5px; height:140.5px;background-color:#759BA6;display:block;float:left;margin:3px">
<div style="background-color:#759BA6;width:100%;height:50%;float:top;color: black;">
<span style="font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;word-wrap: break-word;width:100%;height:100%">Gross Margin Amount</span>
</div>
<div style="background-color:#084C61;font-style:bold;font-size:18.52px;line-height: -moz-block-height;text-align:center;width:100%;height:50%;color: white;float:bottom">
<span style="font-size:13.52px"></span>2,483<span style="font-size:13.52px"></span>
</div>
</div>
Here is the fiddle i have created for reference.
I don't know what should i do to make the first div to wrap text inside it.Any help will be appreciated!
Make height of the div to 100 %:
<div style="width:132.5px; height:100%.5px;background-color:#759BA6;display:block;float:left;margin:3px"><div style="background-color:#759BA6;width:100%;height:100%;float:top;color: black;"><span style="font-style:bold;font-size:28.52px;line-height: -moz-block-height;text-align:center;word-wrap: break-word;width:100%;height:100%">Gross Margin Amount</span></div>
fiddle
I'm currently building a page for case studies that includes a main banner image followed by 3 rows of 3 sub images. Each image is added through the background-image property so the divs can stay the same height. The divs have a hover container over top that I would like to always be on top, but when I get to my break point (850px and below) it is hard, without precise pixels, to keep the cover on top of the container. Is there an easier way to do this, than what I am doing?
Here is the basic HTML structure I am using
<div class="study-list">
<a href="#">
<div class="study-block left">
<div class="left-case-cover">
<div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
<div class="case-study-cta">Click here to read more</div>
</div>
<div class="study study1"></div>
</div>
</a>
<a href="#">
<div class="study-block center">
<div class="center-case-cover">
<div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
<div class="case-study-cta">Click here to read more</div>
</div>
<div class="study study2"></div>
</div>
</a>
<a href="#">
<div class="study-block right">
<div class="rightt-case-cover">
<div class="case-study-title">A Bridge For Kids Raises Scholarship Funds For Students Using Dxxx's Fundraising Software</div>
<div class="case-study-cta">Click here to read more</div>
</div>
<div class="study study3"></div>
</div>
</a>
I'm almost positive this isn't working due to the fact that the covers have to be absolutely positioned over the case-studys. Is there a better way to go about this, or can any of you help me make this work? It looks good for screen sizes 851px and higher, just need to figure out a way to get this working in mobile.
Here is a Fiddle of my current problem, it may help to expand it into fullscreen.
Thank you for the help!
Things I have tried:
• I have tried to make the container that holds the cover a certain width then overflow:hidden to hide the excess hover, but this hasn't worked.
• I've tried to do this with precise pixels but this has also failed me.
Try adding position: relative; to the parent of cover DOM. Also ensure the cover starts from top: 0, left: 0 and ends as bottom:0 and right:0.
You might have to do a clearfix for proper alignments for ensuring overlapping of successive DOMS don't happen. (for <850px resolution alone). Adding this for generic HTML might end up screwing your desktop resolution.
The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">