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.
Related
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>
I have a gallery of images on my website. I had to alter a template I used to make it so that gallery showed images horizontally in rows of 3 or 4. I honestly don't recall how I did this, but when my Name host deleted my site recently (don't ask), and & re-UL'd my files, that gallery looked like it did when I first DL'd the template, and now I can't get the rows any longer.
I've tried commenting out some of the DIVs comparing what I have w/a similar mirror site, but I'm not seeing any change. The mirror site I set up differently so it's not as apt as I hoped it would be. Anyway, the gallery has images w/captions, and I've tried rearranging the info but to no avail. My temp fix is some really messy HTML on the actual site (therealitycomics.com -- gallery section, where there are currently just 5 images).
<footer id="footer">
<div class="inner">
<div class="gallery cf">
<div>
<a target="_blank"
href="http://therealitycomics.com/images/Postcard.jpg">
<img src="http://therealitycomics.com/images/Postcard.jpg" alt="The
Reality" width="155" height="220">
</a>
<div>How our Intraverse<br>connects</div>
</div>
<div>
<a target="_blank"
href="http://www.therealitycomics.com/patreon/PK11.jpg">
<img src="http://www.therealitycomics.com/patreon/PK11.jpg" alt="Phantom
Kid layout" width="155" height="220">
</a>
<div>Phantom Kid pg<br>Layout 1</div>
</div>
<div>
<a target="_blank"
href="http://www.therealitycomics.com/patreon/PK11b.jpg">
<img src="http://www.therealitycomics.com/patreon/PK11b.jpg" alt="Phantom
Kid layout" width="155" height="220">
</a>
<div>Phantom Kid pg<br>Layout 2</div>
</div>
I'n NOT a coder, I just used a template and figured out what changes I needed to make to build my site, so I'm not so great at the trouble-shooting. And, also, it's been so long, I no longer retain the info I !did! learn.
! So please, when you offer advice, be as basic in your descriptions as possible. =] !
Expected result: Those images would all appear in the same row, each one w/its caption.
Actual result: Each image is a row of its own, with the captions under each one.
The DIVs are causing this, but I don't quite get why they're causing it now but weren't before. I checked my main.css b/c I thought the Footer ID or the DIV class "inner" might be the cause based on definitions in the main.css, but I'm not seeing any width or border definitions that are relevant (to my eye), but ALSO when I remove the DIVs around each image and caption, everything jumps up onto one row. And a new row starts with each new DIV tag.
The site (w/its messed up gallery where I commented out all of the old gallery): TheRealitycomics.com
A URL where you can see it as it was: http://therealitycomics.com/indexB.html (again, this is the page where everything HAD been in rows of 3 or 4 but now is just one long column).
Try adding this to your main.css. It should set your gallery section so that it displays four items in a row (unless the browser window width is under 800px, then it will display only two items in a row).
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery > div {
width: 50%;
}
#media (min-width: 800px) {
.gallery > div {
width: 25%;
}
}
#Janne answer is the best way to do it. But, if you don't want to use .css files (not recomended) you can inline the styles:
<div class="gallery cf" style="display: flex; flex-wrap: wrap; flex-direction: row;">
<div style="flex-basis: 25%">
<a target="_blank" href="http://therealitycomics.com/images/Postcard.jpg">
<img src="http://therealitycomics.com/images/Postcard.jpg" alt="The Reality" width="155" height="220">
</a>
<div>How our Intraverse<br>connects</div>
</div>
<div style="flex-basis: 25%"> <!-- Other images -->
...
...
</div>
With display-flex property you tell the container that it should place elements in a unidimensional way, the dimension is set with the property flex-direction ("row" or "column"). With the property flex-wrap you say the container what to do when one child item exceed his container's size, with wrap value his children jumps to another line.
Property flex-basis only set the size of each child, 25% to get 4 children for each row, 33% to get 3, etc...
I'm trying to set up 2 columns in Bootstrap 4 - one column will be an image and the other column a description. My image is portrait and so I need the image to float to the right in order to properly align with the description. This all works fine. However, I also need the columns to split into 2 rows on smaller devices. When this happens, my image is now still floated to the right and I would want it to be centered so it looks properly aligned.
How do I clear a Bootstrap 4 float when a certain breakpoint is hit?
Here is my HTML:
`
<div class="products">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-4 leftimage">
<img class="img-fluid deviceImage penguinPop float-right" src="img/penguinPop.png" alt="Penguin Pop">
</div>
<div class="col-lg-8 appinfo" style="margin-top:6em">
<h2>Penguin Pop</h2>
<p>Penguin Pop is a fun and challenging arcade game! Dapper Dan returns in another entertaining physics based game. Don't let Dan hit the ground or it's game over. Keep him safely in the air by tapping under him, but watch out! Those bubbles that are rising are dangerous! If they float all the way to the top of the screen you lose one of three lives. Tap them before they reach the top to get extra points! Earn stars by playing the game and spending them in the in-game store! The store includes several different penguins to play with. </p>
</div>
</div>
</div>
</div>
`
Assuming that you want to put them on top of each other
try this
First add a new class for example like i did mediaQuery
<img class="img-fluid deviceImage penguinPop float-right mediaQuery" src="img/penguinPop.png" alt="Penguin Pop">
I did the style and the css in a separate file because it's really annoying to put it inside the html
#media only screen and (max-width: 600px) {
.mediaQuery {
margin-right: 50%;
}
}
Try it in a css file because personally it didn't work with me as a css attribute.... and of course you know that you've to link the css file first
I am currently having an issue with Bootstrap that involves html content in one column and an image in another.
For example, I have this html:
<div class="container-fluid main">
<div class="row">
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-5 new-offers-text">
<h2>The new Tivoli now with half price specification upgrades</h2>
<ul>
<li>Half price upgrade from an SE to an EX model - saving <strong>£825</strong></li>
<li>Half price upgrade from an EX to an ELX – saving <strong>£700</strong></li>
</ul>
<p>Offer available until 31st October 2015 and on <strong>petrol engines</strong> only.</p>
<div class="clear spacer"></div>
<h3>Tivoli PCP</h3>
<p>SsangYong Tivoli is now available through a PCP giving you peace of mind.</p>
<p><strong>And for a limited time only, Tivoli EX petrol manuals purchased through PCP are eligible for 3 years free servicing</strong></p>
<p>With low monthly payments and SsangYong providing a Guaranteed Future Value for your vehicle you have three options on completion of your contract:</p>
<ul>
<li>Option 1 - Pay final payment & keep the car</li>
<li>Option 2 - Return the car</li>
<li>Option 3 - Trade in against a new SsangYong</li>
</ul>
<p>Talk to us about tailoring a personal quotation to meet your needs.</p>
</div>
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-7">
<img src="/media/wysiwyg/porto/cmspages/ssangyong/tivoli/towing.jpg" class="manufacturer-logo">
</div>
</div>
</div>
As you can see I have an image in the col-lg-7, the issue I am now having is that when the page is scaled down horizontally I get a large area of white space because the content container get's narrow.
Here is an example: http://puu.sh/kJRsm/86562deefe.jpg
How do you combat this issue because on large screens the layout looks absolutely fine, it's just when the container starts to get narrow that the white space area get's larger?
I think I could combat the issue by making the col-7 div 100% height of the row and maybes take out the img tag and just add a css background with a cover size property on it however I'm wondering if there are any other ways?
I think the best way to do this is using flexbox https://philipwalton.github.io/solved-by-flexbox/demos/grids/ and check that Vertically Centered Grid Cells section.
Other way is, if you don't have to display all that text on sm or md size you can set hidden-sm or hidden-md on part of text and maybe create some read more link or something. For more info check out this http://getbootstrap.com/css/#responsive-utilities.
And maybe the third way is as you said to create div and inside put that picture and maybe use
.div {
overflow: hidden;
}
.div img {
height: 100%;
width: auto;
}
//OR
.div {
background-size: cover;
background-position: center;
}
Maybe there is some better way to do this and i would also like to learn about it but those are the options that i know and i had similar problem many times.
There are two ways to remove the white space.
One is to remove the divs we used to separate the text and image and float the image to right or left & give it a "width" and "max-width:100%" so on the large screens, It takes the image's width and the image will cover an area and the rest of space will be used by text. Don't remember to use the inside the to work like this.
Here is the example : http://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float
the Second option is to test in all the screen sizes (lg-md-sm-xs) Forget sm&xs if you set the image to be 12 columns. You will have to reduce the image width to arrange the text with it on col-md.Regardsnabeel
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">