I'm very new to css and html, and realize this might be a silly mistake...
Code Pen Demo
I don't see a top margin anywhere (using different bootstrap sources and building from them) but no matter how much I dissect the code, I still can't find the problem.
<div id="fh5co-products" data-section="products">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 fh5co-section-heading text-center">
<h2 class="fh5co-lead animate-single product-animate-1">innovating you</h2>
<p class="fh5co-sub animate-single product-animate-2">Your buyers are constantly evolving, and it can be hard to keep up. That's where we come in. </br>By uncovering the latest trends and best-in-class technologies, we work to ensure that you provide a selling experience that exceeds your buyers' expectations.</p>
Please add this css in your code
.jumbotron {
margin-bottom: 0;
}
Because the first element with a child div class="jumbotron" has a property margin-bottom with a value of 30px
in your CSS
.jumbotron {
margin-bottom: 0; // or use margin-bottom: 0 !important if this not work
}
Related
Alright so this is a simple question, but I have been figuring this out for a while now and I was wondering if theres any simpler to way to convert this div from a column to row, here's the format right now.
Problem
So how do I make it into columns? I got this template online for free so I may be confused a little, I tried out changing the padding size and such but it ruins the whole layout,
.service-list {
padding: 0 0 0 0;
font-size: 14px;
margin-bottom: 40px;
}
.service-list-col1 {
float: left;
width: 60px;
}
.service-list-col3 {
float: left;
width: 60px;
}
.service-list-col4 {
float: left;
width: 60px;
}
.service-list-col1 i {
font-style: normal;
font-size: 38px;
display: block;
color: #222;
font-family: 'FontAwesome';
line-height: 38px;
}
.service-list-col2 {
overflow: hidden;
}
.main-section.alabaster {
background: #fafafa;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<section class="main-section" id="service">
<!--main-section-start-->
<div class="container">
<h2>Services</h2>
<h6>Your investment plus our market experience, endless possibilities.</h6>
<div class="row">
<div class="col-lg-4 col-sm-6 wow fadeInLeft delay-05s">
<div class="service-list">
<div class="service-list-col1"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>Business development & Project Syndication</h3>
<p>Highest and Best Use Study for Properties<br> Syndication of Projects<br> Project Feasibility Studies<br> Jumpstarting a New Business<br> Brand Planning<br> Business Planning</p>
</div>
</div>
<div class="service-list">
<div class="service-list-col3"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>investors support and management advisory</h3>
<p>Business Opportunity Scanning<br> Investment Planning & Implementation<br> Negotiations with Local Partners<br> Advisory on Business Entry into Philippines<br> Management to Reposition Existing Property.</p>
</div>
</div>
<div class="service-list">
<div class="service-list-col4"><img src="img/iconn.png" alt="" width="39" height="37" /></div>
<div class="service-list-col2">
<h3>strategies in marketing development, marketing, and sales.</h3>
<p>Strategic Market Research and Planning<br> Positioning & Branding Strategies<br> Market Development Strategies<br> Customized Strategic Marketing & Sales<br> Interventions
</p>
</div>
</div>
</div>
<figure class="col-lg-8 col-sm-6 text-right wow fadeInUp delay-02s"> </figure>
</div>
</div>
</section>
<!--main-section-end-->
In such cases, including HTML markup would help to solve your problem, but let's see.
First of all, you do have rows, the picture given has one column and three rows, so I assume you want to turn those rows into columns.
To do that, make sure the container of those columns (the element that nests all .service-list elements) has width: 100%.
Probably you will have to remove width: 60px from your .service-list-col* elements since that is less than their actual width and it is overflowing, so remove it or set it to something bigger.
If this still doesn't work, try to add display: inline-block to your .service-list elements.
Hope this helps.
UPDATE
Ah, now with the HTML markup it makes more sense. Ignore my css suggestions above, with this structure you can use bootstrap's classes to get your result.
First of all, your service-lists wrapper needs to be able to cover the whole page, for this to happen, you have to define that it takes up 12 columns (default bootstrap css splits the used screen width into 12 columns). To do this, remove these classes col-lg-4 col-sm-6 and add col-xs-12. This will tell bootstrap that this element covers the whole screen width in all screens.
Secondly, you need the service-list divs to cover one third of the screen, so for a good responsiveness I would add to them the classes col-lg-4 col-md-6 col-xs-12. This will make them align 3 per row on a large screen, (12/4 = 3), 2 per row on medium screen (12/6 = 2) and one per row on a small and extra small screen (12/12 = 1).
To sum up, here you can see a working fiddle, I didn't do any changes in your CSS, I just made use of bootstrap classes. Note, to actually see the result, you have to stretch the screen to actually see them line up on the demo.
When I try to make an HTML background color fill for a div, it ends up with a huge amount of extra space at the bottom - I want to make a sort of header, but it becomes really wide. Can someone help me with this?
My HTML is
<div class="header">
<h1>Welcome to My Site</h1>
</div>
My CSS is
div.header{
background-color:grey;
}
Thanks!
I would recommend adding width, height, and margin to your code. You can experiment with your code with a website like codepen.io! Below is a link to an example of what I'm talking about.
https://codepen.io/wykydtronik/pen/VpEGer
div.header{
background-color:grey;
width: 350px;
height: 150px;
margin: 0 auto;
}
If you look at the CSS code you will see I set a width of 350px, and height of 150px. I also added a margin: 0 auto; to make the header div to be center. It's a neat trick that isn't intuitive until you've seen it a few times.
Let me know if this helps, good luck!
I advise you to use bootstrap, there is lots of community support and documentation and you can even override colors and styles for yourself.
Bootstrap well class could work for you.
<div class="well">
Look, I'm in a well!
</div>
Or the jumbotron for bigger impact.
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
I am using bootstrap and basic CSS on my app and for some reason the height-auto on a div isn't working. The height is shown as 0 even though there is text in the div. Here's my html:
<div class="container">
<div class="outlined-div">
<h2 class="text-center col-xs-12" style="color: red">Men are not born knowing how to barbecue.</h2>
<div class="col-xs-12 col-sm-6">
<h4>Good luck explaining this to your buddies.</h4>
<h4>All men are capable. Few are properly trained.</h4>
<h4>Instead, we undergo years of trial and error, suffering through snide comments from our buddies and smug looks from our fathers-in-law. This ends now.</h4>
</div>
<div class="col-xs-12 col-sm-6">
<h4>While men don’t ask for directions (see the man code), it’s only right that we share hints, hacks, and other help with our fellow brothers.</h4>
<h4>Give them a leg up in impressing others with our stellar barbecuemanship.</h4>
<h2 style="color: red">Grill on, brothers.</h2>
</div>
</div> <!-- outlined-div -->
</div> <!-- container -->
Here's my css for outlined-div:
.outlined-div {
background-color: white;
border: solid medium red;
border-radius: 5px;
padding-left: 15px;
padding-right: 15px;
height: auto !important;
}
And here's how it's showing up:
If I put in a fixed height (e.g. height: 10px) the red line expands into a box 10px high.
Can anyone see where I'm going wrong here?
Add the class clearfix to your outlined-div
This will clear the floats added by Bootstrap to create the column layout.
To learn more about clearfixes, read this question: What is a clearfix?
This issue has been fixed thanks to Manoj Kumar
I can't for the life of me fix the root cause of whitespace on the right side of a site I'm currently building, causing the dreaded 'accidental horizontal scrollbar.' It's especially noticeable on mobile.
http://bradfordkolumbic.com/ma/v2/
I've tried every trick I can think of. Using overflow-x: hidden on the body somewhat fixes the issue but I'm not at all about band-aid fixes - I'm attempting to find the full solution.
You have two problems, each with your markup and style sheet.
First you need to remove this:
.info-box {
padding: 20px 0 40px;
}
The above code is overriding the default padding of the col-* classes which was by default added to compensate for the negative margins provided by row classes.
and then in the below code:
<div class="row">
<div class="col-lg-12 text-center">
<div class="row">
<div class="container-fluid text-center partners"></div>
</div>
</div>
You have wrapped a container-fluid element within a row element, while you need to do the reverse.
Bootstrap grid documentation
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Output:
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}