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;
}
}
Related
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..
I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
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.
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;
}
}
The div class circle renders on the right had page but even adding margin:0 auto; nothing works it just stays there what gives.
Here is my html/php
<?php
/*
Template Name: Home Page
*/
?>
<?php get_header(); ?>
<div id="content">
<header>
<h1><span class="tech">TECH</span><span class="basics">BASICS</span></h1>
<h2>Personal Tech Specialists</h2>
</header>
<div class="circle"></div>
</div> <!-- end #content -->
<?php get_footer(); ?>
Here is my css
html {
font-size: 16px;
}
body {
background: #BAE4FF;
font-family: "Open Sans", sans-serif;
}
nav {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
font-weight: 400;
}
nav .menu {
list-style-type: none;
padding: 0;
margin: 0;
}
nav .menu li {
padding: 3px 0 3px 0;
display: none;
}
nav .menu li a {
text-decoration: none;
color: #fff;
font-size: 2.1em;
}
nav .menu .blog {
background: #1669B5;
}
nav .menu .contact {
background: #3892E3;
}
nav #touchNav {
background: #48B4EF;
width: 100%;
display: block;
color: #fff;
font-size: 2.1em;
padding: 3px 0 3px 0;
text-decoration: none;
}
header {
margin: 50px 0 0 0;
margin-top: 50px;
text-align: center;
width: 100%;
}
header h1 {
margin: 0 auto;
width: 100%;
}
header h1 .tech {
color: #fff;
font-weight: 500;
margin-right: 3.5px;
font-size: 1.1em;
}
header h1 .basics {
color: #48B5EF;
margin-left: 3.5px;
font-size: 1.3em;
}
header h2 {
font-size: 2.1em;
font-weight: 100;
width: 100%;
margin: 0 auto;
color: #fff;
line-height: 1.2em;
}
.circle {
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin: 0 auto;
}
try to add position tag.. u can use fixed as position or relative whatever suits your needs.. to the .circle class.
Your circle class margins are funny.
Try this instead:
.circle {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/1/
One should think that this will work too but trust the first one more:
.circle {
margin: 0 auto;
margin-top: 100px;
clear: both;
width: 20px;
height: 20px;
background: #48B5EF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
http://jsfiddle.net/q5w3G/2/
CSS means Cascading style sheets. Cascading means that if one property is defined two or more times for the same element then the property read last is applied. So if you define margin on circle, then again latter in the same style sheet, then again later in a second style sheet with its rel link after the first in the head section, then in the head section itself after the rel links in a style tag, then again inline on the element itself, then the inline value is used. In fact that is the order they are used.
it would be beeter to have an example of page when you ask about css,
but here is the real problem for you
in css margin top does not work as you expect.
its not making a space on the top of your elements unless all the elements be in the same parent z-index (or simpler i mean they all have one parent) i.e all li's within a ul.
the top margin affects space between li's not between li and ul.
for making that you should give the ul a padding-top.
Hope it helps