This question already has answers here:
CSS file not refreshing in browser
(15 answers)
Stylesheet not updating when I refresh my site
(16 answers)
Closed 11 months ago.
I changed a font-size from 20px to 40px and page can't read a CSS. I'm using WordPress.
clearing catch is not working. I thinking its some problem reading from css. WHen i am changin value in f12 from 20 to 40 in exacly this position size is changing.
HTML
<div>
<div class="row_205">
<i class="font-icon-19 fa fa-facebook-f" ></i><i class="font-icon-19 fa fa-instagram"></i>
</div>
</div>
CSS
.fa.font-icon-19 {
color: #ffffff;
font-size: 40px;
display:inline-block;
margin-left:10px;
margin-right:10px;
margin-bottom:20px;
}
.fa.font-icon-19:hover {
text-rendering: auto;
color:#3F464C;
}
.fa.font-icon-19:active {
text-rendering: auto;
}
That is .fa function --->
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Related
This question already has answers here:
How to trigger a file download when clicking an HTML button or JavaScript
(24 answers)
Download File Using JavaScript/jQuery
(32 answers)
Closed 2 months ago.
I wanted to make two buttons in a div, one doing something unrelated, and the other would've downloaded a pdf file. But from what I found, the only solution was using an anchor tag, which was pretty disappointing, since it messed up the styling I was going with. Is there any way to use a button element in react/html to download a file?
Here's the code I have at the moment using an anchor tag, but I'm :
<div className="aboutMeButtons">
<button className="button btn-1">Hire Me</button>
<a href={resume} download className="button">
Download Resume
</a>
</div>
Here's the css, in case that is important:
.aboutMeButtons {
margin-top: 50px;
padding-bottom: 100px;
text-align: center;
box-shadow: none;
}
.btn-1 {
margin-right: 30px;
}
.button {
background-color: #37D4AF;
border-color: #37D4AF;
border-radius: 5px;
box-shadow: none;
outline: none;
padding: 10px;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 20px;
min-width: 220px;
height: 70px;
text-decoration: none;
}
I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
A few days ago I started learning HTML / CSS in my spare time and programming my own test website. At some point I encountered a problem when I tried to visit my website on my smartphone. Here Here you can see that the Picture is shifted above the border.
Everything works fine on the desktop, but as you can see, it has moved on the mobile device. I tried several methods, but none of them resolved the problem. Since I just started, I have no other ideas.
I do not want to post all my code, so the problem is here
thank you in advance
Your problem is not only related to mobile I'm afraid.
That is what happens when you float, the container element loses its layout. To fix it you just need to give it back applying for example an overflow: hidden.
But I suppose you want to still have the img on the right of the Personal Data, for that you have to put the image inside the same container, applying the overflow: hidden.
Just like this:
/*SCHRIFTART*/
#font-face {
font-family: 'Levenim MT';
font-style: normal;
font-weight: normal;
src: local('Levenim MT'), url('ufonts.com_levenim-mt.woff') format('woff');
}
/*ALLGEMEIN*/
* {
margin: 0;
padding: 0;
}
/* CONTENT */
#PB-Bild {
float: right;
margin-top: 6px;
margin-right:7.5px;
}
#Information {
overflow:hidden;
height: 30%;
width: 98%;
border: 7px outset grey;
background-color:whitesmoke;
font-family: 'Arial Rounded MT';
padding-left: 5px;
color:darkblue;
}
.was {
font-size: 150%;
font-weight:900;
}
p.was::first-letter {
color:brown;
font-size:160%;
}
.was {
font-family:Arial;
color: black;
}
.uText {
font-family:Arial;
background-color:ivory;
font-size:120%;
}
<div id="Information">
<img id="PB-Bild" src="https://fakeimg.pl/300x350">
<p class="was">Name:</p>
Domenic Malz <br>
<p class="was">Alter:</p>
16 Jahre <br>
<p class="was">Geboren am:</p>
29.04.2002 <br>
<p class="was">Wohnort:</p>
Berlin <br>
<p class="was">E-Mail</p>
postfach#domenicmalz.de <br>
</div>
The issue you are bringing is known as responsiveness. There are many ways to make your website responsive, first thing I noticed when looking at your code, in your css you are making use of "px" values, they are pixel values meaning they are not scaling with the size of the screen. You should familiarise yourself with more responsive values such as "vw" and "vh" that do scale according to the size of the screen.
If you add a few properties to #banner2, you can ensure the background does not auto scale.
#banner2 {
…
background-size: cover;
background-position: center;
}
SOLUTION:
Remove font-family, font-size and color from the parent div.
EDIT: The problem occurs only when I press CTRL + F5
EDIT2: I tracked down the problem to .site-footer: position:absolute; .It seems that if I change it to relative the problem dissapears.
I'm getting a weird error on a website I'm currently developing.
There are 2 problems:
somethimes the text is not showing at all (though the border for the text is showing) but when I hover over it, it starts displaying.
The text is glitches Ex: instead of "SYDNEY" the text is "TZDOEZ" and I have to refresh the page or change the browser window dimensions to remove the problem.
Did someone else encountered the problem?
Just to be clear:
The text IS NOT the same color as the background.
The text is inserted by pure html not Javascript, PHP, etc
I use Open Sans font from Google Fonts.
It happens no matter what font I use.
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="full-width">
<div class="left">
<ul class="footer-list">
<li>Sydney <span>Tel: +00 0 000 0000</span></li>
</ul>
</div>
<div class="right">
<ul class="footer-list">
<li>Sydney</li>
</ul>
</div>
</div>
CSS:
.site-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: #000000;
padding: 10px 20px;
font-family: 'Open Sans', sans-serif;
text-rendering: optimizeLegibility;
font-size: 13px;
color: #bcbcbc;
}
.footer-list li {
display: inline-block;
padding: 0 9px;
border-right: 1px solid #666666;
}
.footer-list a, .footer-list span {
display: block;
color: #ffffff;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
Have you tried removing text-rendering: optimizeLegibility; and seeing if the bug persists?
This question already has answers here:
How to style button inputs to be identical in Chrome and Firefox?
(4 answers)
Closed 8 years ago.
I have a CSS class for styling buttons. When I apply it to an <input> and an <a> tag, the <a> is a bit smaller than the <input>. This problem occurs in Firefox (33), but in Chrome (38) it looks fine.
Here is a minimal example:
.my-button {
display: inline-block;
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
text-decoration: none;
background-color: #ccc;
color: #000;
}
<input class="my-button" type="submit" value="Save">
<a class="my-button" href="#">Cancel</a>
You can see it also here: http://jsfiddle.net/tr4vbrha/4/
This happens because of a difference in font. The input on windows is Microsoft Sans Serif, while in the a tag it is Times New Roman.
To fix this add the font-family property to the my-button class.
This probably is because the box-sizing property of button is different to that of a button. I added this:
input{
box-sizing: content-box;
}
.my-button{
min-width: 2.75em;
}
and it worked
remove css attribure : display:inline-block
see example :demo
.my-button {
padding: 1em;
border-radius: 0.2em;
border: 1px solid #000;
line-height: 1em;
font-size: 13px;
font-family: Arial;
text-decoration: none;
background-color: #ccc;
color: #000;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
.my-button {
display:inline-block
}
}
<input class="my-button" type="submit" value="Save">
Cancel