I'm currently in the process of setting up my blog, and I am having difficulty formatting the header in the way I had planned.
Here is my site. As you can see, their is extra space on the sides of the header. My goal would be to remove the space, so that the floral pattern is flush with the content box or whatever you call it.
I've gone through my theme's CSS multiple times, and have changed the margins, widths, and paddings on everything and anything possibly associated with the header image, but have had zero luck. Is their something I'm missing?
My blog is hosted through Wordpress and my parent theme is from the Genesis Framework.
Here is the CSS for the header image:
/*
Site Header
--------------------------------------------- */
.audrie .site-header {
background-position: center;
padding:0px 0;
width:100%;
}
/* Title Area
--------------------------------------------- */
.title-area {
padding: 0px 0;
margin-bottom: 30px;
margin-top: 20px;
}
.title-area h1 {
margin: 0 auto;
}
.title-area p {
margin: 0;
}
.header-image .title-area {
padding: 0;
width:100%;
}
.site-title,
.site-title a {
font-size: 64px;
font-weight: 600;
letter-spacing: 8px;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: uppercase;
overflow-wrap: break-word;
}
.site-title a,
.site-title a:hover {
color: #747474;
}
.site-description {
color: #808080;
font-family: Lato;
font-size: 13px;
font-weight: 300;
letter-spacing: .5px;
margin: 0;
text-align: center;
text-transform: none;
}
/* Full width header, no widgets */
.header-full-width .title-area,
.header-full-width .site-title {
width: 100%;
}
.header-image .site-description,
.header-image .site-title a {
display: block;
text-indent: -9999px;
}
/* Logo, hide text */
.header-image .site-header {
background-position: center !important;
background-size: 1000px 200px !important;
padding: 0;
margin-top:-90px;
padding-bottom:30px;
}
.header-image .site-title a {
float: none;
min-height: 200px;
width: 100%;
}
/* Widget Area
--------------------------------------------- */
.site-header .widget-area {
float: right;
text-align: right;
width: 720px;
}
.header-image .site-header .widget-area {
padding: 0px 0;
}
.site-header .search-form {
float: right;
margin-top: 22px;
}
Any help or guidance in the right direction would be greatly appreciated! Thanks!
Your header (.site-header) has a fixed background size of:
background-size: 1000px 200px !important;
But your .site-container div has a max width of 1100px, witch makes your image smaller than the rest. Instead, let it be responsive, as in:
background-size: 100% auto !important;
/*Assuming you have a reason for "!important" */
.site-container has a 36px horizontal padding which is causing the whitespace around your header. If you add:
.site-container {
padding-left: 0;
padding-right: 0;
}
your horizontal whitespace will disappear, but you'll also need to add:
header {
background-size: 1100px 200px !important
}
to get the top image to span full width.
Finally to clean it up I'd add:
.site-inner{
padding-left: 36px;
padding-right: 36px;
}
so your text has some room on the sides.
you could do something like this:
.site-container{
padding: 0
}
.header-image .site-header{
background-size: 1100px 200px !important;
}
.site-inner{
padding: 36px;
}
maybe some !important is needed and check the responsiv-behavior..
Related
In my page I have a left sidebar and a container, container has a margin-left because the sidebar is absolute positioned.
Now for printing I hide the sidebar and restore the margin-left of the container, but the margin is not restored.
These are the styles for my container and sidebar:
#sidebar {
position: absolute;
top: 0;
bottom: 0;
width: 200px;
}
#container {
margin-left: 200px;
padding: 20px;
transition: margin-left .5s;
}
#media print {
#sidebar { display: none;}
#container {
margin-left: 0px !important;
padding: 0px !important;
}
}
I'm using Chrome 40.
Oddly enough, the issue can be resolved in Chrome by removing the transition within the print media query:
Example Here
#media print {
#sidebar { display: none;}
#container {
margin-left: 0px !important;
padding: 0px !important;
transition: none;
}
}
Without removing the transition, you can reproduce the issue here. Perhaps this is a rendering bug?
Probably unrelated with this issue, but I had overriding problems because of this:
.sms-content {
word-break: break-word;
width: fit-content;
line-height: 15px;
font-size: 11px;
}
#media print {
pre.sms-content {
line-height: 12px;
font-size: 9.5px;
padding: 7px;
}
}
the definitions must be the very same, so I had to change it to:
#media print {
.sms-content {
line-height: 12px;
font-size: 9.5px;
padding: 7px;
}
}
body {
font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
}
a {
font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
text-decoration: none;
}
.container {
margin: auto;
margin-top: 5%;
width: 1280px;
height: 800px;
background-image: url(../img/background.jpg);
overflow: hidden;
}
.content {
margin: 100px 0 164px 170px;
}
.logo a {
font-size: 65px;
font-weight: 200;
line-height: 26px;
}
.main {
margin-top: 94px;
}
.main li {
background-position: center center;
background-repeat: no-repeat;
display: inline-block;
height: 150px;
width: 150px;
margin-right: 10px;
margin-bottom: 10px;
}
.main li.home {
background-color: #3387ea;
background-image: url(../img/home.png);
width: 150px;
height: 150px;
}
.main li.about {
background-color: #f9be3e;
background-image: url(../img/about.png);
width: 150px;
height: 150px;
}
.main li.portfolio {
background-color: #d3573e;
background-image: url(../img/portfolio.png);
width: 280px;
height: 150px;
}
.main li.photos {
background-color: #59b0e2;
background-image: url(../img/photos.png);
width: 150px;
height: 150px;
}
.main li.testimonials {
background-color: #33af95;
background-image: url(../img/testimonials.png);
width: 150px;
height: 150px;
}
.main li.hire {
background-color: #86a73f;
background-image: url(../img/hire.png);
width: 310px;
height: 150px;
}
.main li.blog {
background-color: #151a26;
width: 440px;
height: 150px;
}
.main li.contact {
background-color: #7e5b8c;
background-image: url(../img/contact.png);
width: 150px;
height: 150px;
}
The bottom 's are not lined up with top ones even though they match each other in total width.
Each has a margin-right 10px and margin-bottom 10px.
I am using reset style sheet to remove browser setting.
I cannot think of anything that will not allow it to align properly.
Codepen
Please help. Thank you!
This is because the white-space between inline block elements (in this case, the list items) also tabs and new lines between HTML elements are count as a white space.
You could either use CSS float or just remove the white space as follows:
EXAMPLE HERE
.main ul {
font: 0/0 a; /* Set font-size and line-height to 0 for the container */
}
.main li {
/* Then reset the valid value on list items */
font: 18px/1.1em "Helvetica Neue", Helvetica, Arial, sans-serif;
/* other declarations */
}
There are couple of ways to remove the space between inline(-block) elements:
Minimized the HTML
Negative margins
Comment the white space out
Break the closing tag
Set the font size of the parent to zero then reset that for children
Float the inline items instead
Use flexbox
Your choice.
That's because there's still a space between your tiles.
To solve this, make your hire me tile's width 315px.
I'm experimenting with a position:fixed; #header of 100% width and 50px max-height. On full screen for most web browsers I can't gaurantee the content of the layout in the #header will be congruent, however, it will most likely fit the page. The much larger concern however, is upon resize the content of this will look a complete mess. Does anyone have a method they're comfortable with that would scale this content?
Here is a small basic sample of what I'm doing
/* --- Footer/Header Area --- */
#footer {
height: 70px;
max-height: 70px;
width: 100%;
position: absolute;
background-color: #eee
}
#header {
background-color: #fff;
height: 50px;
max-height: 50px;
line-height: 45px;
width: 100%;
position: fixed;
top: 0;
float:left;
box-shadow: 2px 4px 5px #555;
}
#header img {
/* --- TOGOHERE: >>>> margin: 10px 30px 0 --- */
}
#header h1 {
display:inline-block;
font-size: 1.2em;
font-family:Courier New;
text-align: left;
}
#header h2 {
display:inline-block;
font-size: x-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}
#header h3 {
display:inline-block;
font-size: xx-small;
font-family: Tahoma;
text-align: center;
padding-right:2cm;
}
Can you not use alternative container size for each media query. one for large screens, one for medium, one for small and one for extra small.
On my blog siteI have these horizontal blue lines and all I want them to do is span the width of the text box, and the way I did it seems to cause other issues. The only way I could get it to work was to add these funky margins. Is there a simpler way of making it the width of the text box?
.date {
padding: 10px;
margin-left: -42px;
margin-right: -40px;
padding-left: 40px;
display: block;
background: #0076a9;
UPDATED:
#media only screen and (max-width:640px) {
#header, #pageWrapper, #footer {
padding: 30px 20px;
margin-bottom: 0px !important;
}
h1.logo {
text-align: center;
padding-bottom: 10px
}
.slide img {
opacity: 1
}
.sqs-active-slide img {
opacity:1
}
img {margin-bottom: 10px;}
.collection-type-gallery #slideshowWrapper .slide img {
background-color: white !important;
margin: 2px 0;
}
.hentry {
background: #F8F9FC;
padding: 40px;
border-style: solid;
border-color: #E2E7F5;
border-width: 2px
}
Add the following CSS to your media query (or create a new one).
#media only screen and (max-width: 640px) {
.hentry {
padding:20px;
}
.date{
margin-left: -22px;
margin-right: -20px;
padding-left: 22px;
}
.collection-type-blog article header .entry-title {
padding-left:0;
padding-right:0;
}
}
I am working on a HTML/CSS website, with mainly 4 divs (wrapping, top, menu and content), using a centered layout.
The problem is that the text inside my #content overlaps and I can't force it inside the div. Also, when I enable scrolling on the div and disable it on HTML, the scrolling just won't work for the div. So I get stuck with the overlapping content and no option to scroll down.
So, resuming it, I want to use 3 fixed divs, centered, leaving two side-borders and want my background-image to not move. Only the content should scroll inside of it.
Here's my CSS code:
<style type=text/css>
html
{
overflow: none;
}
head
{
}
body
{
background-color: #030B12;
}
p
{
font-family: verdana;
font-size: 12px;
color: #FFFFFF;
text-align: left;
}
h1
{
margin-top: 25px;
font-family: verdana;
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
bg2
{
position: fixed;
top: 0;
left: 0;
}
#wrapper
{
height: 100%;
width: 70%;
margin: auto;
background-image: url('bg2.jpg');
background-position: fixed;
background-repeat: no-repeat;
}
#top
{
background-image:url('top.jpg');
background-repeat: no-repeat;
background-position: fixed;
height: 15%;
width: 100%;
margin: auto;
}
#menu
{
height: 60px;
width: 100%;
background-image: url('navi_bg.png');
}
#content
{
overflow: auto;
display: block;
}
ul
{
list-style-type: none;
height: 60px;
width: 663px;
margin: auto;
}
ul a
{
background-image: url(navi_bg_divider.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 22px;
padding-left: 16px;
display: block;
line-height: 60px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 21px;
color: #FFFFFF;
}
ul li
{
list-style-type: none;
float: left;
}
ul a:hover
{
color: #3F5F7B;
}
Based on what is available, I've created a layout that I think is what you are looking for. There are some issues with getting the top li menu items to center, but I am sure you could work that out pretty easily. You should specify the height of the content area if you want to scroll just that area, and keep the wrapper's background static.
div#content{
max-height:300px;
overflow-y:scroll;
}
Here is the fiddle