I'm customising a Bootstrap template and I can't figure out how to reduce the width of the page margin (so the text is closer to the edge of the page).
For example, if you look at the image below, the text is quite a long way way from the edge of the page. I would like it so the "we will get back to you as soon as possible!" part would continue on the same line, and not start a new line.
https://gyazo.com/e75d1decdd4070446fc73cf95dafd381
In the bootstrap.css file there is the following code which I thought would change it, but it did not work.
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
I'm sure it's something really simple but I can't figure it out.
Thanks in advance!
In the template that you are using, max-width is set to 1000px. Change it to 100% or remove it. The text is currently centered. Align it to the left as well.
header .header-content .header-content-inner {
max-width: 100%;
}
header .header-content {
text-align: left;
}
Output:
Related
fairly new to CSS and HTML here. I have a few questions:
currently trying to replicate this website, and whenever I resize my window so the width is smaller than my header image (1000px), one of the div starts to move as it tries to stay in the center. Basically I would like to keep all of the text content aligned vertically no matter no big the window size is.
Another question is how do I resize the content of .quote::before. I tried defining width and height, but no success.
Here's a JSFiddle so you can check out the code.
Any help is much appreciated!
To awnser your first question,
you need to remove
padding-left and padding-right property from your .main rule.
.main {
width: 550px;
margin: 0 auto;
margin-top: 45px;
line-height: 25px;
font-family: 'Josefin Sans';
color: #222;
}
I let you try this without padding-left and padding-right
To awnser your another question,
I guess you should use media queries
I let you an example
#media screen and (max-width: 598px) {
.quote {
margin: 0 26px;
width: unset;
}
}
I've been working on my website again, but have come across this very bizarre issue. Most of the chartcontainer's adjust to the width of the web page. However, the top 2 are being overridden by what looks like the element.style attribute as shown here:
This means that when the web page is first loaded: http://newton-poppleford-weather.co.uk/trends.htm, the width of the top 2 charts are wider than what the page allows for (100%).
I've tried to code style specific HTML after the 'div id="containerx"' to try and override it but that doesn't work. For example:
<div id="chartcontainer1" style="width: 100% !important">
I'm not sure how/if I can edit the element.style code as after researching it seems that this is set in stone.
Thanks for your help.
William
Add css this way
#chartcontainer1 {width:100% !important;}
The main reason for the horizontal scroll is that you have a 100% wide content and additional padding on left and right here:
#content {
width: 100%;
padding-left: 10px;
padding-right: 10px;
padding-top: 120px;
}
Change it and leave out the left and right padding to:
#content {
width: 100%;
padding-top: 120px;
}
Hi I have a website I am trying to tidy up. I have tried resetting all the margins, paddings, specifying size etc. All haven't lined up these buttons.
It can be found on this link: http://hpif.propertyinfrance.co.uk/app/index.php?action=details&pid=42052&res=rent
Just under the title you will see a "<back" button this needs to be inline with the larger button like divs below it. For some reason nothing I do will get it to line up.
Can someone point out where Im going wrong?
You forgot to add float left to your back button.
#backbutton {
width: 50px;
height: 45px;
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: 199;
float: left;
}
http://booksandloafers.blogspot.co.uk/
As you see, underneath the search bar there is a gap before posts start. My layout is from a template, and the gap was created when I removed some gadgets from that area.
I would like to know if there is anyway I can remove this space without having to put those gadgets back in?
I am for sure a HTML novice, but I've tried other suggestions such as 'overflow: hidden;' but I have not found anywhere that worked. Any advice would be helpful! :)
Remove height from banner id
Change
#banner {
height: 300px;
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
to
#banner {
margin-bottom: 30px;
margin-top: 20px;
width: 940px;
}
When working with HTML/CSS, I prefer to use the "inspect element" feature when working in Firefox/Chrome.
It allows me to noodle around with a problem without saving my work, so that I can figure out what's causing my problem(s).
In your case, #banner has a height of 300px, which is causing your current problem. Remove it from your CSS and things should look normal.
I've come here before with great results and appreciate the help. I've been searching and searching through my code to figure out what is going on and I can't quite get it. At my site http://www.hirelogo.com underneath the navigation there is a random space insert. I've removed div ".top" as I thought maybe that was causing the issue, but this is not to my knowledge. I've been dissecting with firebug, but find no overlap issues that may cause this. The area of random space I'm referring to is below the navigation "home,design team..ect" and the "step1, step 2 graphic" . I hope someone give me a little nudge to whats going on here.
Thanks
The following div is causing a space of 8px.
.top {
clear: both;
height: 8px;
margin-left: auto;
margin-right: auto;
width: 920px;
}
The image to the left has padding and line-height added to it as well:
.descrSplash {
clear: both;
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
line-height: 150%;
padding-top: 40px;
width: 436px;
}
Finally the right image has 10px added above and below it. Also the image is large and can be cropped to raise it up unless you want to set a negative margin.