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.
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;
}
}
Can someone please help me with my Navigation Bar? I have been trying to research how to create one myself, but the buttons seem to end up small, and the bar itself won't stretch to the entirety of the page despite the width 100% snippet. Thanks in advance.
.navBar {
width: 100%
}
.navBar ul {
list-style-type: none;
}
/* Styling of buttons on the NavBar */
.navBar ul a {
float: left;
background-color: #202020;
color: #ffffff;
padding-bottom: 12px;
display: block;
text-decoration-line:none;
font-family: 'Montserrat', sans-serif;
size: 20px;
}
/* Styling of NavBar buttons when mouse hovers over it */
.navBar ul a:hover {
background-color: #006633
<div Class=navBar>Test
<ul>test1</ul>
<ul>test2</ul>
<ul>test3</ul>
</div>
You're looking for CSS relative units.
If you want to make an element match the total width of the screen (specific wording here) then you want to use width: 100vw;. If the element is not rendered at the left (or right) most pixel it would overflow past the screen. Using width: 100%; would have the same effect only it's relative to it's parent element, not relative to the total width of the screen.
It is good practice to add CSS Resets to the top of your CSS styles. Web browsers have default margins and padding which can prevent your divs from extending the full width of the screen.
Add this to the top your CSS Stylesheet.
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
This code will reset the browser default margins and padding. Your navbar should then take up the full page width when you use .navBar { width: 100%;}
For your buttons you can add more padding until you are satisfied. For example:
.navBar ul a {
padding: 10px 30px;
}
This will give your buttons 10px padding on the top and bottom and 30px padding left and right.
As mentioned above, please select the answer that was most useful to you.
Here's the link structure of the page:
<div>
<h2>Digital Marketing
Video Production
Graphics Design
</h2></div>
And the css:
.button{
text-decoration: none;
color: white;
font-weight: bold;
font-size: 20px;
position: relative;
padding: 10px;
margin: 10px 20px 30px 0 !important;
}
#media screen and (max-width: 800px) {
.button {
display:block;
z-index:above;
}
}
It works as intended on a screen bigger than 800px. However on my mobile device, the last link becomes unclickable as it gets overlapped with the next element on the page.
Is this an issue of CSS position attribute? How can I fix this?
As long as there are no position:absolutes, you can add a margin to the elements. This pushes other elements away from itself, by a given distance.
I would try giving the top and bottom margin a value in % instead of px, then it can work out its own space and you'll avoid overlapping.
Maybe experiment a bit like so:
#media screen and (max-width: 800px) {
.button {
display:block;
margin: 1% auto;
}
And also, I don't know if you need the z-index for something you have on the page already, but you're gonna need to give it an actual value for it to work:
z-index syntax: auto|number|initial|inherit;
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.
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.