I'm trying to make a container that takes up 100% width of the screen. The problem is I have been unable to make the content fit within the Bootstrap thumbnail. This problem gets even worse when I shrink the viewport down.
How would I change my code to make it be more responsive.
Check out the JsFiddle: https://jsfiddle.net/tvL7bqfz/1/
<div id='thumbnailDiv' class="thumbnail">
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<img src='http://placehold.it/350x150' class="thumbnailImg">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<h4> Awesome Post Title </h4>
<br>
<h4> Awesome Post Description </h4>
<p>
<a class = "btn btn-primary" > More Info </a>
</p>
</div>
</div>
CSS
#thumbnailDiv{
width: 100%;
height: 250px;
}
.thumbnailImg {
float: left;
max-height: 100%;
max-width: 300px;
min-width: 230px;
min-height: 100%;
}
Why don't you just use col-sm-4 for the thumbnail container and col-sm-8 for the extra info? Then when the viewport goes less than 768px it will stack them on top of each other.
And set the img to width: 100%; but restrict it with max-width: 350px (or whatever your actual img width is).
Jsfiddle: https://jsfiddle.net/2gctwb3r/
Related
I am trying to display divs side by side on a page. However, if there is only one col-md-6 div class on the page, then I am trying to display it full width(100%) rather than 50%. Currently it's using only 50% even if there is only one col-md-6. Is there a way to do this using CSS?
Here is the my HTML and CSS:
<div class="col-md-6 textcontent">
</div>
<div class="col-md-6 service">
</div>
<div class="col-md-6 textcontent">
</div>
CSS
.col-md-6{
width50%;
}
Flexbox is the way to go here. Here is an example:
.wrap {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.item {
flex-grow: 1;
/* For display purposes */
padding: 1rem;
}
.pink {
background-color: pink;
}
.blue {
background-color: lightblue;
}
.green {
background-color: lightgreen;
}
.orange {
background-color: coral;
}
<section class="wrap">
<div class="item pink">
Content 1
</div>
<div class="item blue">
Content 2
</div>
<div class="item green">
Content 3
</div>
</section>
<section class="wrap">
<div class="item orange">
Content Solo
</div>
</section>
https://jsfiddle.net/willihyde/aqrs410u/1/
If you are using the bootstrap, You can use the col-md-12 class to add a full width column. bootstrap grid system is coming as a fraction system and your number will be divide by 12. So if we divide the 6 by 12 the answer is 0.5 and that means 50%. That's why it's adding a 50% width column. So when we add 12 it will divide by 12/12 and the width will be 100%. You can follow the Bootstrap grid system guideline to learn more about the various width ratios and how to make a responsive grid.
<div class="col-md-12 service"></div>
If you are trying to build this by yourself, Define another class with a name and add the width: 100%;
.col-md-12{
width:100%;
}
Then add that class name to your html class attribute
<div class="col-md-12 service"></div>
I have two div's when dragging from div1 to div2, the div1 scrollbar will appear and keep extending all the way until I drag the element on div2. How can I prevent the div from extending when I drag the element inside? Whole the element I am dragging does not break?
<div class="container-fluid">
<div class="row">
<div class="col-md-2 hidden-sm hidden-xs">
<div id='external-events'>
<h4>Draggable Events</h4>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
<div class="tooltipevent" style="width:100px;height:100px;background:#ccc;position:absolute;z-index:10001;">some event</div>
</div>
</div>
<div class="col-md-5 col-sm-12 col-xs-12">
<hr>
<div id="calendar"></div>
//drop event here
</div>
</div>
Drag panel CSS and size
#external-events {
float: left;
max-width: 260px;
width: 260px;
padding: 0 10px;
border: 1px solid #ccc;
background: #eee;
text-align: left;
overflow-y: auto;
overflow-x: hidden;
max-height: 400px;
margin-left: -10px;
}
after dragging
supposed to be like that after dragging
Try to remove overflow-y: auto and add overflow: hidden to your #external-events.
Edit
This answer from Stack Overflow might help shed some light on how to use prevent jQuery from scrolling the page when using draggable elements. Without a working example, I'm not 100% sure this is what you're talking about, but hopefully it proves to be helpful.
Edit 2
In the pictures you posted, it looks like it's scrolling the overflow on the x-axis. That means you'll want to add overflow-x: hidden to the #externalevents styling. You can keep the overflow-y: auto in your code.
I am creating columns inside a row using Foundation CSS front-end framework.
<div class="row small-up-2 large-up-3 food-container">
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
<div class="column food-wrap">
<img src="http://placehold.it/500x500&text=Thumbnail" class="thumbnail">
<div class="panel food-panel-top">
<p>Description</p>
</div>
</div>
</div>
This is my CSS:
.column, .columns {
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.food-wrap { position: relative; }
.food-wrap > .panel {
position: absolute;
width: 100%;
background-color: rgba(0, 0, 0, 0.2);
}
.food-panel-top { top: 0; }
.food-panel-bottom { bottom: 0; }
.food-wrap .thumbnail {
border: medium none;
box-shadow: none;
}
Problem: Each class .foodwrap has a padding to the left and right. I want the class .food-panel-top to be wrapped inside the paddings of .foodwrap. What happens when I give .food-panel-top a width of 100% is that it is going outside the limits. I want the .food-panel-top to have the same width with class="thumbnail"
Any help is appreciated.
I know the answer to this post now. I still to post the answer so it can help out other developers out there.
The key in solving this question is to remove the left and right padding of class="column". After removing the left and right paddings, we can now maximing the width of food panel classes to 100%.
Ok, I have this code I have done up here on how I need this solution to function:
Codepen: http://codepen.io/anon/pen/MaOrGr?editors=110
HTML:
<div class="container">
<div class="wrapper row">
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
<div class="box col-sm-4">
<div class="cta-background">
</div>
<div class="rollover-wrap">
<div class="details">
some text
</div>
<div class="summary">
fhdhjofsdhohfsohfsouhofuhufhoufdsh
fskjoifhspofhdsohfdsohfohfsd
fsdujhofhofdshofhohfds
fdsolhfsdohfodshfohfdsohfosd
fsdljhfdsouhfdsohhfso
</div>
</div>
</div>
</div>
</div>
SCSS / CSS:
.wrapper {
.box {
position: relative;
height: 340px;
overflow: hidden;
margin-top: 10px;
&:hover > .rollover-wrap {
bottom: 260px;
}
.cta-background {
background-image: url('http://ideas.homelife.com.au/media/images/8/2/8/9/0/828947-1_ll.jpg');
background-size: cover;
height: 260px;
}
.rollover-wrap {
position: relative;
bottom: 0;
transition: 0.3s;
z-index: 2;
}
.details {
font-size: 24px;
font-weight: bold;
padding: 20px;
background-color: gray;
height: 80px;
}
.summary {
height: 260px;
font-size: 15px;
padding: 15px;
background-color: #E29222;
z-index: 2;
}
}
}
This is working fine and is the effect I am wanting; however, I need to support the gray area being able to have multiple lines of text, and if one does, then the other adjacent gray sections should expand to the same height.
At the moment it uses fixed heights to assist with hiding and bringing in the transition on hover, but this hinders the ability for the gray area to expand. Even if it could expand, the other boxes need to match the height.
I have tried using flexbox and changing the html layout to no avail.
I don't mind if the image & summary sections have a fixed height, but the gray area needs to be able to expand to it's content.
Is there anyway to do what I want to do without JavaScript? If not, is there a clean way to do it with JavaScript/jQuery that doesn't have too much of a messy fallback?
I am using bootstrap grid to show a image gallery. Now I want to center the entire bootstrap .container within a div (.abc). Here is the link to the fiddle - http://jsfiddle.net/tn3j2kos/
Code below -
.abc {
margin: auto;
width: 96%;
background-color: #ffffcc;
}
.imgframe {
position: relative;
display: inline-block;
width: 120px;
height: 80px;
margin: 5px;
}
div img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: inline-block;
height: 100%;
max-height: 70px;
max-width: 110px;
margin: auto;
}
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="abc">
<div class="container">
<div class="row">
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://mozorg.cdn.mozilla.net/media/img/styleguide/identity/firefox/usage-logo.png?2013-06" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://www.google.co.in/images/srpr/logo11w.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
<div class="imgframe col-lg-2 col-md-3 col-sm-6 col-xs-12 thumbnail">
<img src="https://g.twimg.com/About_logoUsage.png" />
</div>
</div>
</div>
</div>
</body>
More details - The sample in fiddle has five thumbnails. I want the thumbnails within the div .row to be left aligned. And the group of thumbnails (inside div .container) to be center aligned inside div .abc.
My several attempts have failed, and I posted the code for my last attempt.
EDIT - Don't bother running code snippet inside SO as it is rendering incorrectly. Use js fiddle I posted at top instead.
EDIT 2 - Perhaps I can explain what I want to achieve through this equation container_width = no_of_thumb*(thumb_width+margin*2).
EDIT 3 - How it appears-
How I want it to appear-
I think you are misunderstanding the workings of bootstrap a bit:
.container should be your outer most wrapper, or you could use .container-fluid in stead
.col- classes determine width and padding/margin of the block they are aplied to. Messing with these values will break the responsiveness. Use a wrapper inside those .col blocks in stead if you need to play with dimensions.
why are you positioning those images absolute? I don't see what you are trying to achieve...
I went ahead and cleaned up your fiddle a bit. I think this may be what you are after: http://jsfiddle.net/tn3j2kos/4/embedded/result/
HTML:
<div class="abc">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-6">
<img class='img-responsive' src=#" />
</div>
....
CSS:
.abc {
background-color: #ffffcc;
padding: 0 4%;
}
just set .container to display: inline-block and call text-align: center on .abc
FIDDLE