I use a template on my Blogger and since it was too narrow, I adjusted the sidebar and the main posts column. It worked great but only for the homepage.
The problem is that the sidebar doesn't appear the same on all pages.
See one of the pages that the sidebar is not the same.
My current CSS code for the sidebar is:
#sidebar-wrapper {
border-radius: 5px;
color: #A8AAAC;
background:rgba(0,0,0,0.1);
float:left; margin: -2430px 150px 100px -120px;
width:40%;
}
and there is one more code sample for the sidebar, but even though I tried to change it nothing happened.
#sidebar-wrapper .widget {margin-bottom: 30px;}
#sidebar-wrapper a:hover{color:#fff}
#sidebar-wrapper h2 {
color: #C8CACC;
font-size: 14px;
letter-spacing: 2px;
line-height: 1.4;
margin: 30px 0 10px;
font-family: Oswald,Arial,sans-serif;
font-weight: bold;
text-transform: uppercase;
}
The issue you're having is because you are controlling content with margins instead of controlling the dimensions of the main page id=wrapper div and all its children. Your header is 1000px wide but your wrapper is 740px wide. First make them both same width.
Second, the main-wrapper and side-wrapper margins need to be removed.
Using margins to adjust content differently on each page is a very bad practice. Next adjust the percentages of both wrappers to add up to a total of 100%. I suggest you use width:30% for side-wrapper and 68% for the main-wrapper (why leave 2% from the main-wrapper is to give a bit space in between both wrappers. You can use margins to give space but make sure to negative that margin from the width percentage to keep both wrappers in same line.)
With a few more tweaks, you can build a clean CSS settings that will ultimately fix all the pages with the side-bar pages.
Related
I'm really not sure what is happening here. I've commented out areas of code that I suspected it would be, made sure it wasn't a glitch, there's something I'm obviously not seeing here. Hope one of you web design experts can help me here.
* {
margin: 0;
padding: 0;
font-family: "Montserrat";
}
I've tried setting overflow-x to hidden which fixes it, the problem is that when I do that the overflow-y seems to be automatically set to auto instead of visible and doesn't change when I set it manually to visible.
http://jsfiddle.net/jg10vzcx/
The culprit is the .sub-text element. It is a block level paragraph element with a default width of 100%. You are positioning it with left: calc(50% - 15vw) in order to center it. In doing so, it is extending past the viewport (because it has a width of 100%) and it is creating a horizontal scrollbar.
You can remove the left positioning and simply add text-align: center to the element in order to center it.
Updated Example
.sub-text {
position: relative;
margin-top: 2vh;
/* left: calc(50% - 15vw); */
font-size: 2vw;
text-transform: uppercase;
text-shadow: 0 0 1vw black;
text-align: center;
}
on this page (http://whitewashed.richiesiegel.com), when the page width is < 400px there is some extra room on the right that i'd like to get rid of.
here's the media query
#media handheld, screen and (max-width: 400px) {
#nav {
height: 30px;
background-color: white;
font-size: 1.3em;
padding-top: 9px;
padding-bottom: 10px;
text-transform: uppercase;
overflow: hidden;
}
#nav span {
color: #272732;
letter-spacing: .192em;
font-family: "brandon-grotesque",Helvetica,sans-serif;
font-weight: 100;
text-transform: uppercase ;
}
}
any ideas? overflow or margin issue?
From what I can see, your nav has nothing to do with this. I've located one element that is causing this: #footnote has a calculated width of 475px at viewport of 400px. You can easily fix this one by using box-sizing: border-box; on that element (with the -moz- and -webkit- prefixes in addition). Fixing this div fixes most of your whitespace issue.
The rest of the additional space seems to be caused by your .text and .intro divs. At 400px viewport, .text are a total of 410px wide and .intro is 420px, which appears to be some margin and/or padding. You can do similar to above by using box-sizing or shrink the width.
If you go the box-sizing route, which I highly recommend for responsive design because it accounts for padding and borders when calculating width, you'll need to increase the padding to give your text some room to breathe.
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;
}
First of all, want to say, that I'm not a front-end engineer and my skills of UI and UX are very low.
So my question is:
I have a div with p tags inside. I want to have it width: 700px when the browser window is maximized. But if I put this property in CSS of my div. The text will not shrink if I resize the window. So I want to have it up to a certain point while window is maximized and shrink it if you resize the window, without affecting side-bar div.
To be more clear I will give you an example:
Maximazed Browser window:
Minimized Browser window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}
You don't need to use Media Queries in your case, but that would be the case in more complicated cases (different breakpoints for example).
Just use max-width: 700px and you're done.
Normal behavior: your paragraph is never wider than 700px.
With very small widths, paragraph occupies the whole width as would any block element and it's still smaller than 700px so no need for MQ!
See this fiddle to see it into effect: http://jsfiddle.net/LQbgJ/ (I used 200px instead of 700)
Compatibility should be IE7+
What you want are Media Queries. Take a look at the W3C recommendations for them.
Basically, the syntax is as follows:
#media screen and (min/max-width: ){
//do something
}
These are called 'break points'. Which means, at the point where the browser reaches the min/max width you provide, you can over-rule other css. So you can make your p and div sizes different.
#media screen and (min/max-width: ){
div {
width: 200px;
}
p {
font-size: 20px;
}
}
Also take a look at Smashing Magazine's tutorial on how to use them.
I have a page which I can't seem to get right in terms of a few styling details.
http://www.comehike.com/earn_money.php
It has two problems with it that I can't seem to get right (largely because design and styling are my Achilles heal).
Problem 1: at the bottom, the footer div sticks out to the right. I tried wrapping it in diff divs, and looking via FireBug, but can't seem to get it to stop sticking out....possibly because I am tired and brain dead :)
Problem 2: Do you see how the main page div ends above the footer and div? Is there way to make the main area of the page extend below the footer?
Thanks!
For the first part of your question, you can fix it by simply removing the width property on your footer, since it's a block element, and it will occupy 100% of the available width (after padding/margin/etc).
For the second part of your question, I'm not quite sure what you're asking, but I think you would change the style on #mainBody to be: padding: 5px 5px 20px; or some other large number for the third value?
Take width off of the footer's CSS.
If you want the footer to be within the main page, you have to position it within .basic
Set footer div width to 900px from 960 will fix footer sticking out
width: 900px;
problem2. The layout is correct how it should be. This is how the layout is
<div>
<div class="basic">
<div> <-- google ads
<div> <-- footer
</div>
to fix this simply change the layout to this
<div>
<div class="basic">
<div /> <-- google ads
<div /> <-- footer
</div>
</div>
Problem #1:
Looks like you want your footer to be 960 pixels wide. But you have a 10 pixel white border which actually makes the footer 980 pixels wide. Remove the border and your footer will again be 960 pixels as you designed. Then it appears you'll have to tweak width: 960px; until it fits properly. 950px seems to work well.
.footer{
width: 960px;
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
border: 10px solid #fff;
}
Should be...
.footer{
width: 950px; /* adjust the width to fit */
padding: 0.5em 0;
margin: 0 auto;
margin-bottom: 20px;
text-align: center;
vertical-align:center;
background: #fff;
color: #462c1f;
}
Problem #2:
You need to put the banner's <div> and <div class="footer">...</div> inside of and near the bottom of <div class="basic">...</div>