I use font awesome icons and everything was aligned in the middle as it should in staging. Once the site went live, all the font awesome icons moved up to the top and I can't figure out why. I compared the css being used on chrome developer tools but so far I can't see any difference.
Here's the link to the homepage. http://studyusa.com/en/ You can see that the magnifying glass on the top navigation, all of the social network buttons under the slider, and menu icons next to "Browse Schools by Degree Level" all moved up.
Hope I can get any hints.
-- update
Wow, thanks for all the answers! However I must apologize to everybody because I checked the site today and it looks the way it should without me changing any code. Now I'm curious as to why something like this is possible.
iam not sure about this, hope this is because of various line-heights used.. but try update the class ".fa" below. Hope this will fix your issue..
.fa {
line-height: inherit!important;
}
Try to add this:
.fa {
transform: translate(0, -50%);
top: 50%;
position: relative;
}
Don't alter .fa CSS, this is needed for every icon and will break every other icon you have!
Instead, add this to your css:
.search-trigger {padding:15px;}
I tested that in Chrome and it worked fine.
Try:
.toggle-make a {
display: inline-block;
float: none;
}
I have played with Chrome Inspector and it seems that floating has something to do with it. As far as I can see, you are using display: block; with width but no height.
You need to add this code
.fa-twitter:before{
position: relative;
top: 8px;
}
Related
I am trying to get two font-awesome icons to always display over a series of divs.
When the user hovers over the main details, I can get the details to be surrounded by a border with a different background. However, this does prevent the the icons from being displayed correctly.
I understand that this requires the use of the z-index, but all of my attempts to display the icons correctly have failed. I have searched SO & Google, but still cannot solve this simple issue.
This is what I am attempting to achieve:
This is what I currently have:
Here is my JSFiddle example.
I would really appreciate some assistance solving this issue.
Just some code to display the jsfiddle:
<div id="id_membership_details_resume_template" class="live_preview_wrapper noselect resumeStyleWrapper10" dir="ltr" style="direction: ltr;">
Remove this
#id_resume_detail_content {
position: relative;
}
Edit: and update this also for the X button ( just changed top and right according to jsfiddle provided template )
.resume_details_unselect {
position: absolute;
right: 15px;
top: 45px;
visibility: hidden;
}
Hey I'm trying to add icons to my top navigation bar.
I have a plugin for social media icons, so I am trying to add the plugin shortcode to the nav menu. I downloaded a plugin to allow me to add shortcode to a menu.
Here is the shortcode I want to add: [feather_follow show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
I tried adding size="16" to make the images smaller but it made them disappear completely. Please visit my site to see the results I am getting. Containers and sizing are all screwed up, I have no idea how to begin fixing this.
Can anyone take a quick look and suggest anything? I would REALLY appreciate it. I have already wasted hours and hours on this simple problem. My site is greenenvysupply.com
Try adding this
[feather_follow size="64" show="twitter, google_plus, facebook" hide="reddit, pinterest, linkedin, tumblr, mail"]
You should use percentages for making your icons smaller without losing the ratio of the icons. So you can write something like this in your main CSS:
.top-bar ul>li a {
width: auto!important;
height: auto!important;
}
.top-bar ul>li a img {
position: relative;
width: 30%!important;
height: 50%!important;
}
I'm creating my portfolio site on Bootstrap 4. I've implemented a sliding javascript caption (tweaked from a source online) to overlay the thumbnail images. That all works fine (except for the caption box extending too far out..), but when I started using that, the left edge of where my thumbnails start has moved to the right and I can't figure out what's causing the problem. I've been trying to figure it out for hours.. whatever's causing it is not caused by my custom CSS, because I tried removing it all and it was still weirdly aligned there.
Another thing that I'm trying to do is have the thumbnails tiled up right up against each other, but I can't figure out how to get rid of their margins/padding...
Here's a link to make it easier to check it out. Thanks so much in advance, it would really mean a lot to me if I could get this to work.
SO sorry for the messy code, I'm going to clean it up once I get this stuff working.
EDIT: I don't know why, or how.. but the alignment problem was caused by the UL class. I changed it to a div and now it works perfectly.
Look at your code. You have defined width twice. use width:97%;
#hover-img .caption-btm {
background: rgba(4, 186, 183, 0.6);
width: 70%; ********
height: 60px;
position: absolute;
bottom: 4px;
color: #fff;
display: none;
width: 100%; ********
}
I am having a very weird problem. I do a css 3 cardflip animation for my portfolio. In Firefox everything works fine, but in chrome for some reason the first card has a wrong direction for the animation. As you can see, the left image shows the wrong animation, stretched wrong, while the right one is perfect. All the cards are created by a script so there can not be a difference in the html markup or the css for that matter.
Any Ideas? What kind of information can I provide to help figure this out?
Cheers Lukas
Update
.card flip
{
text-decoration: none;
text-align: center;
float: left;
position: relative;
display: block;
z-index: 30;
}
Remove perspective and webkit-perspective they causing error
I am currently working on making a photography website for my good friend. I have employed the custom jScrollPane scrollbars from Kelvin Luck over at www.kelvinluck.com.
However, I am having some problems.
The temporary website is hosted here: http://phr-clan.com/nikka/index.php You'll see the lovely scrollbars in action. But, there's a problem. Scroll down all the way to the bottom and you'll see that the text is being cutoff before you can scroll all the way to the bottom. It turns out that there is actually around a full couple paragraphs that aren't being displayed. And the ironic thing is that it displays correctly in IE6 (Isn't it usually the other way around?)
Anyway, what am I doing wrong? Here is my CSS file: http://phr-clan.com/nikka/styles.css
Help is greatly appreciated. I have been pulling my hair wondering why it doesn't work.
Thanks.
Just add
p.text {
text-align: left;
font-family: 'DISCORegular';
font-size: 19px;
padding: 3px;
margin-left: 10px;
margin-right: 10px;
display: block;
}