I want to set the height of the section based upon the child elements but unfortunately I don't know what's wrong with my code. When I try to decrease the size of the screen the content in the paragraph and the img is overflowing.
HTML
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
</div>
CSS
.about{
height: auto;
margin: 0;
}
.about .container-section{
padding: 0;
height: auto;
position: relative;
}
.about .container-section .about-content p{
padding-bottom: 15px;
font-family: 'Lato', sans-serif;
text-align: justify;
}
.about .container-section .about-pic img{
height: auto;
width: 100%;
padding-bottom: 25%;
}
Any suggestions?
Ok, it looks like you're using Bootstrap, right? And Bootstrap is adding some floats, which removes elements from the page flow, and thus the container behaves as if those elements aren't in it. Try adding a cleared div in various places and see if it solves your issue, like so:
<div id="section2" class="about">
<div class="container-section">
<div class="about-content col-lg-6">
<p></p>
</div>
<div class="about-pic col-lg-2">
<img />
</div>
</div>
<div style="clear:both;"></div>
</div>
Related
I want to position a div according to the picture:
I'm successful so far by using Bootstrap's row class and using z-index in my CSS. But when I resize the browser, it's not responsive, it just floats off the right side of the page. By the way, I'm using position: absolute (I read online that I have to use this in order to make use of z-index). Is there any other more elegant way to do this? I want it to be responsive but can't seem to find any other workaround than the wonky one I implemented.
Code:
#div2 {
float: inherit;
position: absolute;
top: inherit;
left: 60%;
width: 320px;
height: 1290px;
z-index: 5;
}
<div class="container">
<div class="div-container">
<div class="row">
<div id="div1">
<p>Div 1</p>
</div>
<div id="div2" align='center'>
<p>Div 2</p>
</div>
</div>
<div class="row">
<div id="div3">
<p>Div 3</p>
</div>
</div>
</div>
</div>
You need to make use of the nested rows inside a column. See here - Bootstrap Nesting. Ignore the CSS here as it is for snippet styling and height is used for ignoring the content.
.B {
min-height: 130px;
background: #393276;
margin-bottom: 20px;
}
.A {
min-height: 100px;
margin-bottom: 20px;
background: #393276;
}
.C {
min-height: 250px;
background: #393276;
}
div {
text-align: center;
color: #fff;
font-size: 32px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container mt-4">
<div class="row">
<!-- First Column -->
<div class="col-sm-6">
<!--Rows nested inside a column-->
<div class="row">
<div class="col-12">
<div class="A">A</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="B">B</div>
</div>
</div>
</div>
<!-- Second Column -->
<div class="col-sm-6">
<div class="C">C</div>
</div>
</div>
</div>
I have used flexbox to keep responsive design and some margin positioning to keep the formation together.
.container{
display: flex;
flex-wrap: wrap;
width: 150px;
}
.div1, .div3{
margin-right: 5px;
width: 50px;
height: 50px;
}
.div2{
margin-right: 5px;
width: 50px;
height: 110px;
}
<div class="container">
<div class="div1"> div1 </div>
<div class="div2"> div2 </div>
<br/>
<div class="div3" style="margin-top: -55px;"> div 3 </div>
</div>
h1 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
.container {
max-width: 1115px;
margin: 0 auto;
}
.profile-pic {
margin-top: 3vh;
}
<header>
<div class="container">
<div class="row">
<div class="col-sm-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
</div>
<h1 class="col-sm-6 text-right middle"> Abhi</h1>
<h3 class="profession text-right">FRONT-END</h3>
</div>
</header>
Hi everyone, I am using bootstrap, I want my image and h1 to be at at same row, image to be at extreme left and heading to be at extreme right when browser gets resized. When I am resizing image comes at top, and my heading goes down, which is not looking good.
problem i m facing is shown in image
If you want name and profession in a column on the right, you should put them in some container (not .container, just a new parent element) with the class .col-**-6.
In following example, I'm switching to -xs- for resolutions lesser than 768px. I also removed centering of .container because it's already done by BS afaik.
EDIT: working example in Bootply
Relevant documentation: Bootstrap 3.x Grid
.col-xs-6 {
outline: 1px dashed darkred;
}
h1 {
font-size: 36px;
}
h3 {
font-size: 24px;
}
.container {
max-width: 1115px;
/*margin: 0 auto; already applied by BS afaik*/
}
.profile-pic {
margin-top: 3vh;
}
<header>
<div class="container">
<div class="row">
<div class="col-xs-6 profile-pic"><img class="img-responsive img-circle" src="image/setu.png" alt="Setu Shubham">
</div>
<div class="col-xs-6">
<h1 class="text-right middle"> Abhi</h1>
<h3 class="profession text-right">FRONT-END</h3>
</div>
</div>
</header>
I just started using Foundation and I like it a lot. I have a question. I have a design that requires the logo to be horizontally centered, on-top and in between two full divs (see attached picture).
The code below is what I have which seems to work fine but doesn't re-size on screen changes and I was wondering if there was a better way to accomplish this when working with Foundation.
Is there a possible improvement that I could do to better integrate the logo into Foundation? In other words is there a way to integrate the logo in a way that It re-sizes when the screen changes or this is my best option and I would need to re-size it manually for multiple screens?
HTML
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
CSS
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
position: relative;
}
.logo{
position:absolute;
left: 50%;
top: 20px;
margin-left: -100px;// half-width of logo
z-index: 20;
}
.box{
background-color: #333;
height: 120px;
margin-bottom: 10px;
}
If you know the height of the logo, you can use negative margin-top as well, but you'll probably have to wrap the 2 outer divs with a new div.
HTML:
<div class="outer">
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
CSS:
.outer {
width: 100%;
position:relative;
}
.fullWidth {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
// position: relative; // REMOVED
}
.logo{
position:absolute;
left: 50%;
top: 50%;
margin-left: -100px;// half-width of logo
margin-top: -100px;// half-height of logo
z-index: 20;
}
You can do the following to make it center
<div class="row fullWidth">
<div class="large-12 columns box">
<img src="logo.png" class="logo">
</div>
<div class="row fullWidth">
<div class="large-12 columns box"> </div>
</div>
</div>
DEMO
Is it the logo that doesn't resize? If so, try this:
.logo{
position:absolute;
left: 50%;
top: 20%;
margin-left: -100px;//half-width of logo
z-index: 20;
}
The logo should be able to resize now.
I am trying to center some so that they are displayed within the center, however the tricky part is the html is within a number of (part of the html is static, and part of it is dynamic from a database).
See the screenshot as an example of how it currently looks (I want this content in the centre)
http://postimg.org/image/5fc6ecgy7/
note - the site is using the base 960 grid system
Below is the HTML:
<div class="">
<div class="">
<div class="">
<div id="national-prize-feed" class="panel-wrapper ">
<div class="border">
<div class="content clearfix add-radius">
<div style="padding:10px 0px;">
<div id="nation-prizes-collection" class="clearfix">
<div class="summary"></div>
<div class="">
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png">
</div>
</div>
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="Football" src="/images/prizes/football.png">
</div>
</div>
</div>
<div class="keys" title="/pages/index/slug/prizes" style="display:none">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My specific css (there is a lot more.. it is based on a grid based layout)
div.prizes {
float: left;
}
div.prizes img {
width: 280px;
}
.prizes-img {
padding: 0 7px 0 7px;
margin: 7px 5px 7px 5px;
max-width: 100%;
height: auto;
}
In order to position a DIV to the center of a screen, you need to set a static width of the div to be centered, left: 0px, right: 0px, and the respective margins to auto.
Here is an example: http://jsfiddle.net/pR4hq/
<style>.center{
position: relative;
display: block;
width: 120px;
background: rgb(90,90,90);
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}</style>
<div class="center">Center Content</div>
So my logic of Div ID's and Classes must be WAY off.
Heres whats going on:
As you can see the blocks which say PS don't align center with the slider (Which is inside a container.
Here is my css:
/*Front Page Buttons */
#frontpage-Button-Cont {
height: 350px;
}
.button-cont {
width: 175px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 250px;
}
.thumbnail {
color: #fff;
font-size: 5em;
background: #1f4e9b;
width: 175px;
height: 135px;
text-align: center;
}
.pheader {
color: #DC143C;
min-width: 175px;
text-align: center;
}
.paragraph {
text-align: center;
}
#Align-content {
margin: 0 auto;
}
And here is the html:
<div id="frontpage-Button-Cont">
<div id="Align-content">
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
<div class="button-cont">
<div class="thumbnail">
PS
</div>
<div class="paragraph">
<div class="pheader">
HEADER
</div>
<p>dadaasdasdadadad
</div>
</div>
</div>
</div>
My theory is that I'm using classes incorrectly?
Thanks.
You can Add this to your CSS
#frontpage-Button-Cont {
width:100%;
}
#Align-content {
display:table;
}
With this your margin:o auto can work
View This Demo http://jsfiddle.net/VGPeW/
You need to make sure that the containing div (in this case frontpage-Button-Cont) is the same width as your slider above it. Then add the property text-align:center to the container. That should fix your issue.