I am trying to implement a grid onto this page. Because the Wordpress page uses overflow:hidden to the layout it will need to remain as is.
Out of curiosity, I tried
.content-container, .content {
overflow:visible
To see if it will reveal the entire grid that was cut off and it did, but also revealed what I am trying to hide through the layout, a spare bit of page.
Is there any way that I can reveal the whole grid without having to allow the overflow?
It cuts off the sides because .container's width is set to a fixed value of 1170px. If you set .container's width to 100% all content will be stretched.
.page-id-2099 .container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
This will work:
.page-id-2099 .content-container, .page-id-2099 .content
{
overflow: visible !important;
}
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?
Here's how I'm centering my content:
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}
I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...
#asc99c is right.
The scroll bar is causing your problem.
When it appears, it pushes everything over.
To solve this (if you must), you could make your pages taller than 100%. Something like
body, html{
height:100%;
}
div{
height:101%;
}
With div being your main content div.
Example: http://jsfiddle.net/jasongennaro/7NYnS/
The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/
I'm trying to build a quick overview that shows the upcoming calendar week. I want it arranged horizontally so it can turn out to be quite wide if we show a full calendar week.
I've got it set up right now with an inner div with a fixed width (so that the floated "day" divs don't return below) and an outer div that's set to width: 100%. I'd LIKE for the outer div to scroll horizontally if the page is resized so that the inner div no longer fits in it, but instead the outer div is fixed larger at the width of the inner div and the page itself scrolls.
Gah I'm not good at explaining these things... Here's a bit of code that might clear it up..
The CSS:
.cal_scroller {
padding: 0;
overflow: auto;
width: 100%;
}
.cal_container {
width: 935px;
}
.day {
border: 1px solid #999;
width: 175px;
height: 200px;
margin: 10px;
float: left;
}
and the (simplified) structure:
<div class="cal_scroller">
<div class="cal_container">
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
</div>
</div>
So to try again - I'd like the cal_scroller div always be the page width, but if the browser is resized so that the cal_container doesn't fit anymore I want it to scroll WITHIN the container. I can make it all work if I set a fixed width on cal_scroller but that's obviously not the behavior I'm going for. I'd rather not use any javascript cheats to adjust the width of the div if I don't have to.
Your cal_scroller class is 100% + 20px (padding) wide. Use a margin on cal_container instead, like so:
.cal_scroller {
padding: 10px 0;
overflow: auto;
width: 100%;
}
.cal_container {
margin: 0 10px;
width: 935px;
}
See here for a description of how the box model works (in short, the everything is outside the width/height of an element).
Also, block elements (like <div>s) are 100% width by default, making your 100% width declaration redundant.
One problem I see is your width: 100% rule. div.cal_scroller is already a block-level element, so it'll default to filling the entire page width. (Not to mention that padding is added on top of width, so you end up with that div being bigger than the page.)
Just get rid of that width rule, and you should be golden. (I just tried myself, and it worked like a charm.)
I didn't read your question very carefully, but when you have width: 100% and padding, that's generally not what you want.
100% + 20px > 100% - that might be the problem.
I struggled with this a lot but the simplest solution I found was adding:
.cal_container { white-space: nowrap; }
This way you don't have to give it a width at al. It just makes sure everything stays in one line.