I'm having trouble with having adding an underline style on hover in my css. Whenever I hover over the text, the padding/margin freaks out. I'm not sure why. Here is the website. https://portfolio-blog-5cc56.web.app/
h2:hover {
position: relative;
border-bottom: 10px solid #85C0DB;
display: inline-block;
line-height: 0.15;
transition: 0.3s ease;
margin: 0
}
It seems like it is changing your line-height from 3rem to 0.15.
See the original css:
h2 {
font-family: 'EB Garamond', serif;
font-size: 1.9rem;
line-height: 3rem; /* <-- */
font-weight: 400;
color: black;
margin: 0;
}
Related
I have defined two links and made them look like buttons using css styling.
HTML code looks like this:
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
How it should look
But on mobile devices, these two buttons collide.
Wrong mobile device look
Is it possible to style them using css, to display correctly, without collision?
btn-red class example is here:
.btn-red {
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 8px 40px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
position: relative;}
a.btn-red {
background-color: #dd0000; /* change background color here */
border: 2px solid transparent;
color: #fff!important; /* change font color here */
font-weight: bold;}
a.btn-red:hover {
background: #dd0000; /* change background color on hover here */
border: 2px solid transparent;
padding: 8px 54px 8px 40px !important;}
a.btn-red:after {
font-family: 'ETmodules';
font-size: 32px;
opacity: 0;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 32px;
line-height: 1em;
content: "\35";
position: absolute;
margin-left: -1em;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;}
a.btn-red:hover:after {
opacity:1;
display: block!important;
font-family: 'ETmodules';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
right: 0px;
top: 5px;
margin-left: 0;}
EDIT:
I tried to use responsiveness for padding, which should be enough to solve my issue, but its not working as intended. What exactly is wrong? Code is included in btn-red class.
code here:
#media only screen and (min-width : 1024px){ padding: 8px 40px;}
#media only screen and (max-device-width : 320px) {padding: 2px 10px;}
I think this might work. However, I am not sure.
<h2 style="text-align: center;"><strong>Continue to </strong> <a class="btn-white" href="/?page_id=137531"><strong>Accessories</strong></a> <a class="btn-red" href=""><strong>BUY</strong></a></h2>
I had just added six times.
You can do this ...
Place "Continue to" & the buttons in two separate div elements.
HTML:
<div class="display-ib">Continue to</div>
<div class="display-ib">
<button class="btn1"></button>
<button class="btn2"></button>
</div>
CSS:
.display-ib {
display: block;
}
#media (min-width: 768px) {
.display-ib {
display: inline-block;
}
}
Being mobile first as per the trend today
I have website:
http://marekzurek.com
I'd like to change menu font size to 14px and make social media icons 200% bigger.
My CSS: https://past ebin.com/EuAw67mf
first for the font size go to your css on line 352 and change font-size: 10px; to 14px. Then for the icons go on line 844 and up the font size.
Simply set font-size to the right value for both the menu and icons.
In your style.css find .mainmenu .navbar-nav li a and add font-size: 14px;
.mainmenu .navbar-nav li a {
color: #fff;
font-size: 13px;
padding: 30px 15px;
-webkit-transition: .3s;
transition: .3s;
font-weight: 400;
font-size: 14px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
As for the icons, do the same and set font-size to 200%;
.social-links ul li a {
font-size: 200%;
color: #222222;
margin: 25px 10px;
display: block;
}
#menuid-or-class { font-size:14px;}
.icon-class {font-size:200%;}
I am using foundation and I have some issues when aligning a button containing an icon in Internet Explorer. It is fine if I put text inside instead of an icon. Any ideas? Thank you very much.
HTML
<div class="medium-3 column">
<button class="tiny round expand btn-green" type="submit" value="Submit">
<span class="fi-magnifying-glass btn-i iconic-s" title="magnifying glass" aria-hidden="true"></span>
</button>
</div>
CSS
button, .button {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: "Titillium Web", Helvetica, Roboto, Arial, sans-serif;
font-weight: 400;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 1rem 2rem 1.0625rem 2rem;
font-size: 0.875rem;
background-color: #1B98E0;
border-color: #167ab3;
color: #FFFFFF;
-webkit-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
}
span.btn-i {
margin-left: 5px;
font-size: 1rem;
}
button.tiny, .button.tiny {
padding: 0.625rem 1.25rem 0.6875rem 1.25rem;
font-size: 0.6875rem;
}
.button, button {
letter-spacing: 1px;
text-transform: uppercase;
}
You can see that it is perfectly aligned in chrome
In internet explorer the height goes over the input and does not stay in the row. IE Is the only browser with this issue.
I have my a container wich has a background image a title and button.
I want to hover on the container and change the title text-align to left, same as the button and display some information.
My question is if this is possible using only CSS3?
Here are the images of what I want to do:
(The name doesn't matter it's just an example)
Here's my HTML:
<article class="destination__item destination__item--jacksonhole">
<h2 class="destination__item--name">Jackson Hole</h2>
Ver más
</article>
My CSS:
.destination__item {
padding: 16em 0;
text-align: center;
}
.destination__item--canyons {
background: url(../images/destinos/dest1.jpg) no-repeat;
background-size: cover;
}
.destination__item--name {
color: white;
font-size: 36px;
font-weight: 700;
padding-bottom: .5em;
text-transform: uppercase;
}
.destination__item--btn {
background-color: $color__red--primary;
color: white;
font-weight: 400;
font-size: 14px;
padding: 1em 2.5em;
transition: all .5s ease;
text-transform: uppercase;
&:hover {
text-decoration: none;
background-color: $color__red--dark;
color: white;
}
}
To be honest, I have no idea where to start on the hover state, hope you guys can guide me a little bit.
Sure you can, just add the following to your CSS:
.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
display:block;
text-align:left;
}
here is a working example
You can change other div on hover of other example:
.destination__item--jacksonhole:hover + destination__item--name{
text-align: left;
}
To change Content check this Fiddle , text on link is changed.
html:
<article class="destination__item destination__item--jacksonhole">
<h2 class="destination__item--name">Jackson Hole</h2>
<span>Ver más<span>
</article>
CSS:
.destination__item {
padding: 16em 0;
text-align: center;
}
.destination__item--canyons {
background: url(../images/destinos/dest1.jpg) no-repeat;
background-size: cover;
}
.destination__item--name {
color:black;
font-size: 36px;
font-weight: 700;
padding-bottom: .5em;
text-transform: uppercase;
}
.destination__item--btn {
background-color: $color__red--primary;
color: black;
font-weight: 400;
font-size: 14px;
padding: 1em 2.5em;
transition: all .5s ease;
text-transform: uppercase;
&:hover {
text-decoration: none;
background-color: $color__red--dark;
color: white;
}
}
.destination__item:hover .destination__item--name,
.destination__item:hover .destination__item--btn {
display:block;
text-align:left;
}
.destination__item:hover .destination__item--btn span{
display:none;
}
.destination__item:hover .destination__item--btn:after{
content:"New Content"
}
I'm having problem using images on my project. I want it to look just like the first two images. When I tried to fix the height of the images via CSS, it becomes ugly. Is there a way that it will just resize by itself without overlapping like what happened on the third image?
CSS :
.product-image-wrapper{
border:1px solid #F7F7F5;
overflow: hidden;
margin-bottom:30px;
}
.single-products {
position: relative;
}
.new, .sale {
position: absolute;
top: 0;
right: 0;
}
.productinfo h2{
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.product-overlay h2{
color: #fff;
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: 700;
}
.productinfo p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #696763;
}
.productinfo img{
width: 100%;
}
.productinfo{
position:relative;
}
.product-overlay {
background:#FE980F;
top: 0;
display: none;
height: 0;
position: absolute;
transition: height 500ms ease 0s;
width: 100%;
display: block;
opacity:;
}
.single-products:hover .product-overlay {
display:block;
height:100%;
}
.product-overlay .overlay-content {
bottom: 0;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
}
.product-overlay .add-to-cart {
background:#fff;
border: 0 none;
border-radius: 0;
color: #FE980F;
font-family: 'Roboto', sans-serif;
font-size: 15px;
margin-bottom: 25px;
}
.product-overlay .add-to-cart:hover {
background:#fff;
color: #FE980F;
}
.product-overlay p{
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
color: #fff;
}
JSFiddle
What my actual page look like:
Cropping the image to the right size is probably your best bet. Other alternatives would be creating a div that wraps around the third image, and giving that div exact dimensions and setting overflow:hidden. That will basically crop the image. Honestly I think you are better off cropping the image yourself though, because then its easier to control what shows up. You'll have to deal with cropping in some way if you want to avoid stretching.