I'm trying to have the background colour of one post expand the width of the browser but to no avail.
This is the site
I've tried
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: absolute;
width: 1200px;
}
and
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: aboslute;
width: 100%;
}
but that affects the whole post and shifts it to the left.
Where am I going wrong?
If I'm understanding your question correctly, you need to add the following to your CSS:
body {
margin:0;
}
Instead of absolute, use 'relative'. Set your width to 100%.
Add the following CSS at the end of your CSS file (or find these rules in your code and amend them to the following):
#site {
padding: 130px 0;
}
#canvas, .content-wrapper {
max-width: none;
}
Related
So, I am working on something and I am trying to create an image tag that is inside another div. The problem is, I write
.container {
padding: 0;
margin: 0;
}
.container img {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
}
<div class='container'>
<img src='https://www.clarkson.edu/_site_support/background_image_banks/images/tor_images/studcnt_4128800003.jpg' alt='A problem occured'>
</div>
But there is still some room before the edge. I also tried to put padding to 0 and margins to 0 but still, nothing.
Give body margin as 0px;
body {
margin: 0px;
}
Use a reset file or structure in css to set the values to a defined default and not let browsers get that. One of the reset files I've used is from here http://meyerweb.com/eric/tools/css/reset/ . The body in this case has a margin of 8px and since there is not box-sizing defined it affects the widths. Try that.
Try this code
body,html{
margin:0px;
padding:0px;
}
Set the float attribute to get rid of the extra room:
div img { float: left }
But about the size of the image you need to have in mind that if the div's width/height is set as percentage, the inner element's width/height can not be set in percentage.
If you'd like to set the image width/height in percentage, you need to specify the dimensions of the div in pixels.
E.g.
This works:
div {
width: 600px;
height: 400px;
}
div img {
width: 100%;
height: 100%;
}
But this does not work:
div {
width: 100%;
height: 100%;
}
div img {
width: 100%;
height: 100%;
}
Totally, what you need to handle both parts of your question is something like this:
div {
width: 100%;
height: 100%;
}
img {
float: left; /* or right, whatever you'd rather */
display: block;
}
Though, for a better suggestion, information about the container of the div's needed.
If you go here you will see at the very bottom a light gray box that says "Partners". While the site is in full screen mode everything looks correct but when you edit your browser and make the width smaller then it switches to have an image on each line. It appears to happen when the max-width of the DIV gets below 1000px which you can see from the below I have the CSS set to be a max-width of 1000px or 95% of the browser width. Any ideas on how I can fix this?
.footer-full-row {
padding-left: 20px;
width: 95%;
max-width: 1000px;
margin: 0px auto 0px auto;
color: #fff;
background:gray;
}
In your responsive.css file, you have media queries that set all img elements to display: block;. You could override that using something like
.footer-widget img {
display: inline-block;
}
If I understand you right, you want the images to not display in a separate row each, so you need to add this css property to .textwidget img :
.textwidget img{
display:inline-block;
}
This will make it wrap anyway,in order to leave the size of the images as is, but you'll not get each picture in a separate ligne, it'll be wrapping according to the need of the page.
In your style.css change:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
}
to this:
#footer .textwidget {
background: none;
margin-bottom: 26px;
padding: 0px;
overflow: hidden;
display: flex;
}
I am putting entire website inside a div with ID container. The css for container is
#container {
width: 960px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
But the problem is that it also limits the background to 960px. I want to exclude background & allow it to fill entire screen. i.e repeat on x-axis
Use the following code - should work :
CSS
body {
width: 100%;
background: #fff;
}
HTML
<body>
<div id="container">
</body>
To do that,
First set your body's margin(left and right) to "auto", this way anything under the body will be centered.
So,
Here's the first code:
body{
margin: 0px auto;/* Centers your page */
background-color: #898989; /* Add a nice background-color */
}
There, Now for the div,
It is important to have a width defined for the div
so, assuming that your div is having an id called container:
#container{
width: 960px;
}
'
That's it! :D
I hope it's helpful!
Put background on parent element, eg. body.
body {background: url('...') repeat-x};
#container {width: 960px; ...}
just put what you want for background in body tag
body {
background:whatever_you_want;
}
I have a very simple website I'm working on for practice and having a problem with the background-color for my container div. I'm sure it's a pretty simple fix but I want to understand why it didn't work. Here is my CSS:
body {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
For some reason the only way I've managed to get it working is when I include html in my body styling, is there a reason for this?
body, html {
margin: 0px;
padding:0px;
height: 100%;
background-color: black;
}
Thanks
While the problem is that an element, other than the <html> root element, needs a parent with a specified width (in order to calculate its own relative height), you can avoid the problem using units relative to the viewport, such as vh (1vh is equal to one-percent of the height of the view-port, and so is pretty much a direct drop-in replacement for a %-based height), such as:
body {
margin: 0px;
padding:0px;
height: 100vh;
background-color: black;
}
#Container {
width: 98%;
height: 100%;
background-color: grey;
}
JS Fiddle demo.
The problem with that approach, of course, is that it restricts the content of the #Container from growing and allowing the <body> to scroll (this may be by-design, of course), but you could instead use min-height to obviate the problem, and allow the elements to grow:
html {
padding: 0;
margin: 0;
}
body {
margin: 0px;
padding:0px;
min-height: 100vh;
background-color: black;
}
#Container {
width: 98%;
min-height: 100vh;
background-color: grey;
}
#expansion {
height: 3000px;
width: 2em;
background-color: #f00;
}
JS Fiddle demo.
(Note that in the above demo I'm using another element to force the #Container to expand, that's purely for demonstration purposes, and is not required by this approach.)
References:
CSS relative lengths.
Can I use: viewport units (vw, vh, vmin, vmax).
Make sure that you are calling your selector correctly. This is case sensitive.
Container Vs container (Small c and Capital C) and also ( # Vs .) Class for dot(.) And ID for Hash (#)
Images appear to be cut off when the flexslider carousel animation starts.
Can it possible that this problem comes within the flexslider.css style code?
Full code with animation can be found here:
JSFiddle
I'm putting here a partial code of the flexslider.css where the problem is suspected to be.
.flexslider {
width: 250px;
height: 600px;
background: black;
}
.slides {
width: 100%;
height:100%;
padding:0;
padding-left:30px;
}
.slide {
width: 100%;
}
.slide img {
width: 100%;
}
.col{
float:right;
}
#side{
width: 40%;
margin-right: 150px;
margin-top: 0px;
}
I'm able to replicate your issue here: http://codepen.io/anon/pen/akjzx
Now, I'm not sure what's causing the issue since you couldn't get a live demo together. I recommend playing with the following CSS value. It should provide a solution to your problem.
.slides {
width: 100%;
height: 100%;
padding-left: -30px; /* Adjust this value; try a negative value */
}
I also recommend right-clicking the images in Chrome and selecting "Inspect element." This will help you debug the CSS and possibly determine what is causing the image to off.
Specially, you could add:
.flexslider .slides > li { padding-left: 0; }