I am working with the twentyfourteen WP theme - I removed the header by using "display: none" but now there is a large empty gap at the top of the site. I guess this is because there is still an empty div there, but I'm not sure why the rest of the content isn't being shifted up.
Site: http://theroadmap.co/generation/
Thanks!
This isn't even a proper question, but here you go.
<div id="main" class="site-main">
Has margin set to 48, set it to 0 using this:
#main { margin-top: 0px;}
Related
I made a navigation drawer WITHOUT borders but a thin line on the left just can't seem to go away.
I tried doing a border : none to remove any border around the component, it won't work.
I also tried inspecting the element, and the problem is a <div class="v-navigation-drawer__border"></div> so I tried removing it by calling it in the CSS but it's still there. I even added the !important propriety.
Does anyone know how to remove a border next to a v-navigation-border ?
What it looks like
You have to use a deep selector for scoped CSS to select inner elements of components.
<style scoped>
.v-navigation-drawer >>> .v-navigation-drawer__border {
display: none
}
</style>
https://vuetifyjs.com/en/api/v-navigation-drawer/#sass-navigation-drawer-border-width
According to the vuetify doc, you could set the variable #$navigation-drawer-border-width to 0
$navigation-drawer-border-width: 0
So I'm designing the website for my dad's company and I'm trying to get rid of the whitespace above the header on the page. I tried making the margins 0 and paddings 0 but nothing is changing. Here is my code and a link to the website:
header {
font-size: 20px;
position: relative;
background-color: #DDDDDD;
height: 150px;
}
The problem is the the w3-sidebar-class you are using inside the page. It sets the top margin to a negative value. In order to analys these kind of problems, I suggest you start from a black html page and add new elements to it step by step. Then you can see which changes have which effect.
I am making a simple fixed SoMe sharing button set for a blog. Everything is fine and dandy except in Safari. Hovering over one of the buttons changes the background-color of the siblings to a color I do not specify anywhere in my CSS. This behavior goes away as soon as I change the wrapper from fixed to relative/static/absolute.
Has anyone ever run into this?
Am I doing something wrong?
If not, is there a hack/fix/workaround?
HTML:
<div id="share-links">
<a class="share-twitter" href="#">a</a>
<a class="share-facebook"href="#">a</a>
<a class="share-linkedin" href="#">a</a>
</div>
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
Fiddle: https://jsfiddle.net/u6vzq192/26/
I discovered this problem in a slightly different situation. I have pagination dots in a fixed div using links like you have set up. I am adding a class to the links with Javascript which in turn changes the background color. Every time this happens the background colors of all the other links go crazy. I believe that it is a rendering bug in Safari inverting the background of the links when one changes.
After much experimentation with your example I discovered that it stops if either the links themselves are much larger or the container is much larger. Since setting the links to be giant buttons affects design, it seems the best solution is to set the container to be larger. Since your example is a vertical set of links you would set the height of the container to be something much larger than the links. I used height: 100%; but a large px should work too. If you had links laid out horizontally you might need to make that width: 100%; instead.
CSS:
#share-links{
left:0;
top:5em;
position:fixed;
height: 100%;
}
#share-links a{
display:block;
height:2em;
width:2em;
color:white;
background-color:#a16159;
}
#share-links a:hover{
background-color:#8a392e;
}
I encountered a similar problem. As well as being fixed, one of the inside elements had transform:rotate 90 deg and had a hover effect that changed its position slightly (pulled out from the side of the screen). The background color of this element and its sibling were the same, and both would flicker randomly when elements on the page were changed / rendered.
I finally found a combination of styles that stopped the background colour flickering altogether.
I added the following to the parent element from here: https://stackoverflow.com/a/27863860/6260201
-webkit-transform:translate3d(0,0,0);
-webkit-transform-style: preserve-3d;
That stopped the flickering of the transformed/sliding element.
And I added the following to the remaining element from here: https://stackoverflow.com/a/19817217/6260201
-webkit-backface-visibility: hidden;
This then stopped the flickering of the background colour for the sibling element.
I was trying to add twitter/facebook icon to the site footer, much like side.cr footer. I got everything working, except that safari having unexpected vertical tile for twitter and facebook. I tried to upload screenshot but I am new user, so can't do that right now.
So I was searching for the answer and found this q/a here, Is <img> element block level or inline level?
So I went to side.cr again to see its css does have user agent stylesheet.
I added this line of code to my css:
.footer ul li img.t, li img.f {
width: 40px;
vertical-align: middle;
display: inline-block;
}
and it fixed the problem.
But I have a few questions in head:
why does side.cr's css show as non-editable user agent, while I have to add that display-inline to my css?
How does "display: inline-block" fix the problem?
Notice that: When mouse over to the gray twitter, it triggers swap.js, changing the icon image to the colored one, but in safari, the highlighted icon is bigger than the gray one. I think i almost know the answer. Just need someone who knows all the kinks behind this.
Thanks!
Solution:
To fix this problem make sure you set the height and width on the image so that it doesn't change during loading.
<img src="http://www.side.cr/images/contact/twitter_off.svg"
class="twitter_bird img_swap" height="52px" width="52px" />
or
.twitter_bird {
height:50px;
width:50px
}
Explanation:
When you switch the images name, safari begins to load the image but it doesn't know the height or width until it's done downloading. If you set the height and width it will not grow from 0px to 52px.
i would like to ask how can i split my blogger header into two columns? Can you help me please? I'm having a hard time figuring out...
btw, i just need to add my logo at the left then google adsense on the right.
Thanks!
first you need to configure your blogger header max widgets. Check it if its more than 2. if not change it to (let's say) 4 and add the following css attributes under the #header & #header2:
float:left;
width:50%;
You'll be able to add new gadgets which is aligned horizontally. then add google adsense on the right and your logo at the left. Save your template and view!
Login to Blogger.com
Click on the "Template" section.
Click on "Jump to Widget"
Click on "Header1"
Under the code it jumps to, ie:
<b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Bog Tittle (Header)' type='Header'>
</b:widget>
</b:section>
Insert this code:
<b:section class='header' id='header2' maxwidgets='2' showaddelement='yes'>
</b:section>
<div style='clear:both;'/>
Now search for and find: "/b:skin"
ABOVE "/b:skin" insert this code:
#header {
float:left;
width:50%;
}
#header2 {
float:right;
width:30%;
}
You can adjust the percentages based on what you desire.
On the layout page, after you save the template AND REFRESH, you should see an "Add a Gadget" area to the right of your logo, where you can insert your adsense widget.
If things don't look right on the Layout page, place these codes below the other ones:
#layout #header, #layout #header2 {
padding: 0px !important;
margin: 0px !important;
width: 50% !important;
}
Remember to save your template and also remember to click REFRESH after you save your template.