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;
}
Related
I've got an HTML element that extends beyond the browser window to the right, and I want some spacing between it and the document edge.
The obvious (to me) approach would be to add padding to the body so there is some space around everything in the document. But, that doesn't seem to work for things that extend beyond the browser width. Adding a margin-right to the element doesn't work either.
This jsfiddle should illustrate the problem pretty clearly:
https://jsfiddle.net/sccottt/qjajhL05/2/
I feel like I'm spacing on something obvious here.
EDIT: Add width to the body
https://jsfiddle.net/swordys/2cwhudxr/8
<p>
Scroll that way →
</p>
<div id="wide-thing">
I want padding on this side →
</div>
CSS
body {
padding: 25px;
width: 1500px;
}
#wide-thing {
background-color: #cf0;
height: 100px;
width: 100%;
text-align: right;
}
Found a neat working solution in this answer: https://stackoverflow.com/a/22302368/749635
This code allows the body element to expand to fit whatever wide elements are inside it:
body {
float: left;
min-width: 100%;
}
I have a website here
http://trentmcminn.com/
For some reason the bottom of the page (the word Barney) is slightly cutoff by the fixed position footer. I am trying to add padding to the bottom of the body by this but it is not doing what I am trying. I am not sure what is going on. ANy help would be appreciated.
body {
padding-bottom: 100px;
height: 100%;
}
This happens because the absolutely positioned footer is overlapping with column layout.
You could either reduce the size of the columns and give them a negative bottom margin, or apply a padding to the columns like for example:
div#grid.col-4 div.column {
width: 25%;
padding-bottom: 10px;
}
html{ padding-bottom: 25px;}
This pads 25 pixels to the bottom of every page that uses the css that includes this tag. All pages should have tags enclosing the content. This is a better option then body because dynamic content and floating divs may not give the desired effect within the body. It also is handy in that it will give you a constant padding effect on all pages within the site.
Increase the margin of you div#grid.albums div.item from 30px to 50px, for example.
That will solve your problem.
Update following style rule:
div#grid.albums div.item {
margin-bottom: 30px;
margin-right: 30px;
padding-bottom: 1px;
}
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.
(source: ctrlv.in)
I am facing this issue in my responsive design website,when i reduce the width of the browser less than approx 700 pixels.
i added margin-left: auto;
margin-right: auto;,but the output remain unchanged.If i put left:50%,it shows some weird perhaps position because my header is postion:fixed(though i have not mentioned its top/left/right/bottom anywhere else).
The logo "ilovetrolls" starts from the center of the page....and hence the center of the image is not centered.The page
(source: ctrlv.in)
Any help would be appreciated.Thanks a lot
just remove this style
#header {
text-align: center;
}
placed inline line no 428 in media only screen width 767
You need to change the display property of the #topdiv1 (on line 663) to display: block. I fiddled around in my Chrome web inspector and got it to work that way. Couldn't hurt to set the float to float: none either.
Take div.#topdiv3 and remove float: left and add in margin-left: auto; margin-right: auto. Then move div.#topdiv3 outside of div.#outter-wrapper
Try something like this:
<style>
.container {
margin-left: auto;
margin-right: auto;
/* To see the affect of the above; not part of centering implementation. */
background-color: #aaa;
width: 200px;
}
</style>
<div class="container">
Hello, world!
</div>
Hi all
I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly.
This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!
.main_content {
float: left;
width: 816px;
background-image: url(Images/evokedesign_bg_tile.png);
background-repeat: repeat-y;
overflow: hidden;
}
.portfolio_buttons {
float: left;
width: 634px;
}
Site link: http://evokedesignstudio.com.au/Portfolio.html
Now you posted a link to your live site, I found the answer very quickly:
On .gallery, remove the height: 400px rule.
Done.
This fixes IE7, and nothing changes in IE8/other browsers.
You have got your .page_container set to a fixed height of 730px.
Try updating the CSS to
.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}
Same with the .gallery as #thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).
By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.