I have a icon font and I need to center my letter in a circle.
I copy my code in this jdfiddle
This is css code
.icon:before {
margin: 0 auto;
font-size: 57px;
}
.icon h2 { text-align: center; }
.circle.icon:before {
border-radius: 50%;
color: #FFFFFF;
width: 65px;
height: 65px;
display: block;
text-align: center;
line-height: 1.2em !important;
}
.icon.mobile:before{ content: 'F'; }
.mobileC { color: #8CC63E; }
.icon.mobile-background:before { background-color: #8CC63E; }
this is html code
<div class="icon circle mobile-background mobile"><h2 class="mobileC ">Mobile games</h2></div>
As you can see via normal browser they are centered
but when I open the page via mobile I see this
The same result if I turn-off the line-height from browser inspector.
Can someone know how can fix this?
Did you try to add a
vertical-align:middle;
?
in most cases, it works.
Or you can just use padding, and avoid resizing by using:
div{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Related
Description
Image
How my website looks right now (No margins on sides)
How it should look
I'm not sure what is causing this issue, I really have no clue.
#moto {
font-size: 48px;
font-weight: 300;
color: #484848;
margin: 60px 0;
letter-spacing: 0.8px;
}
#moto span {
color: #FF5A5F !important;
font-weight: 700;
}
.row {
position: relative;
max-height: 970px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
#media all and (max-width: 1000px) {
.row {
padding: 0 15px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
<!-- MOTO-->
<div class="row">
<h1 id="moto"><span>Where to?</span> Start your next trip with<br /> Great Danes.</h1>
</div>
idk what else to say, idk whats wrong or where to start, it was working until this point
https://youtu.be/k4q5kM90zvY?t=207
THIS is the YT video I am following, pls tell me how to work it like him
by looking at your code and the pictures you posted, I believe you would like the .row element to be centered and aligned, like in the second picture. For that, edit your .row element in your css stylesheet. Try this, I believe that is what you are looking for:
#moto {
font-size: 18px;
font-weight: 300;
color: #484848;
margin: 60px 0;
padding-top:5px;
padding-bottom:5px;
letter-spacing: 0.8px;
}
#moto span {
color: #FF5A5F !important;
font-weight: 700;
}
.row{
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: yellow;
}
#media all and (max-width: 1000px) {
.row {
padding: 0 15px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
}
If you are just starting out with HTML and CSS, check out Bootstrap, it's a framework that will ease your whole work process with HTML and CSS, it's very easy and cool to use, also it's the world's most used framework. Check it out here: https://getbootstrap.com/docs/5.1/getting-started/introduction/
This a simple sign up formed I've made my school project and for one to sign up is to choose their roles. There's not much to this but I can't seem to figure how to fix this border problem under the anchor? How do I make it so that the space at the top is equivalent to the bottom as well?
enter image description here
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
.center {
position: absolute;
top: 150px;
width: 99%;
text-align: center;
font-size: 18px;
}
.box {
margin: auto;
border: 1px solid #ccc;
width: 30%;
padding: 15px;
}
a {
background-color: #333;
text-decoration: none;
display: block inline;
color: white;
padding: 14px 20px;
margin: 8px 0px;
border: none;
cursor: pointer;
width: 100%;
opacity: 1.5;
}
a:hover {
background-color: #ddd;
color: black;
}
ul {
list-style-type: none;
}
li {
display: inline;
}
<div class="center">
<div class="header">
<h2>WELCOME TO SMK USJ 12<br/> ENGLISH QUIZ</h2>
</div>
<form action="role.php" method="post">
<div class="box">
<h3>Choose your role<br/> You are a...</h3>
Teacher</button>
Student
</div>
</div>
You have a typo with the display property on the a tags. I think you meant to use inline-block instead of block inline?
a {
/* ... */
display: inline-block;
/* ... */
}
The correct solution (in my opinion) would be to change your markup a bit, employ a wrapping container for the buttons and then apply the proper styles to that container. However, without changing your markup - you can still achieve what you are looking for, by adding some line-height to your buttons. Something like:
.box a{
line-height: 5em;
}
Should put you in the ball-park of what you are trying to achieve.
I've got multiple textareas. One underneath the other. There should not be any spacing between them, since I explicitly set their margin to 0.
However on chrome, there is a rather larger gap, on firefox it's small, but still there, and on IE it actually behaves as intended.
body{
background-color: #0087B3;
font-family: Helvetica, sans-serif;
}
.editor {
width: 460px;
display: inline-block;
}
.panel{
text-align: left;
margin: 10px;
padding: 12px;
background-color: rgba(255,255,255,0.1);
}
.panel .toolbar{
background-color: #007da6;
height: 40px;
}
.panel .lines{
height: 400px;
background-color: #ACE1F2;
}
.panel .lines textarea{
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
}
<div class="editor">
<div class="panel" id="panel">
<div class="toolbar"></div>
<div class="lines">
<textarea rows="1">There should be no space</textarea>
<textarea rows="1">between these textareas</textarea>
<textarea rows="1">however in chrome & firefox there is</textarea>
<textarea rows="1">except internet explorer</textarea>
</div>
</div>
</div>
JSFiddle to play around
Does anyone have a clue?
Thank you in advance!
You need to add display: block; to your textarea styles
.panel .lines textarea {
resize: none;
font-family: inherit;
font-size: 12pt;
padding: 8px;
box-sizing: border-box;
width: 100%;
height: auto;
overflow: hidden;
border: 0 none white;
outline: none;
margin: 0;
display: block;
}
Please check the updated fiddle here : https://jsfiddle.net/fu3ytLpt/4/
The only fix was to assign the display to match the box sizing.
display: -webkit-box;
I'm wanting to create some boxed content that reveals alternate content when hovered. I've found a few examples from others questions, and tried to utilise them to what I want, but not having much luck.
The perfect example of what I'm trying to achieve is the 3 hover buttons under the "Build a Smarter WordPress Site" (just below the fold) on http://www.copyblogger.com/.
I'm assuming the static state includes an icon/image & text below, and the hover state includes an icon/image, descriptive text, and a hyperlinked button.
This is exactly what I'm wanting to reproduce. Could anyone please provide an example of this so I can understand what I need to do?
Thanks.
Edit: I understand the code Copyblogger have used from what little I can retrieve through "Inspect Element". I'm not looking to use their code - as I cannot find all the connecting commands, but something that acts the same way.
for code sample that showed in your sent link
<li class="design">
<div class="icon">Design</div>
<p>The Genesis design framework, support and dozens of stunning themes.</p><div class="btn-primary-small">Find Out More</div>
</li>
the css will be
li.design a{
display:none;
}
li.design:hover a{
display:block;
}
Here is a fiddle. There are 3 or 4 ways to do this, but you just want someone to do it for you, so I wont go into those specifics. I wrote it mobile first and assuming you can use box-sizing: border-box; - so if you can't do that - then you just add the proper widths and you'll be good to go.
HTML
<a href="#" class="block-icon">
<div class="block top-stuff">
<div class="text-w">
Top stuff
</div>
</div>
<div class="block under-stuff">
<div class="text-w">
<h4>Under stuff</h4>
<p>Some paragraph</p>
<div class="button">Call to action</div>
</div>
</div>
</a>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
.block-icon {
position: relative;
display: block;
width: 100%;
float: left;
border: 1px solid red;
text-align: center;
height: 10em;
margin-bottom: 1em;
}
.block-icon .block {
height: 100%;
padding: .5em;
}
.block-icon .text-w {
width: 100%;
height: 100%;
display: inline-block;
vertical-align: middle;
border: 1px solid blue;
}
.block-icon .text-w:after {
content: "\0020";
height: 100%;
display: inline-block;
vertical-align: middle;
/* this creates a second element so that they can align vertical middle to one another */
}
.top-stuff {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: white;
opacity: 1;
transition: opacity .5s linear;
}
.under-stuff {
background-color: #eee;
}
a:hover .top-stuff {
opacity: 0;
transition: opacity .1s linear;
}
.button {
width: auto;
border: 1px solid black;
}
#media (min-width: 500px) {
.block-icon {
width: 32%;
margin-right: 2%;
}
.block-icon:nth-of-type(3) {
margin-right: 0;
}
} /* end break-point */
I have a responsive web page in which I am trying to show a modal with an image inside. The following is the html of the modal
<div id="open_modal" class="modal">
<div id="chicken">
<img src="images/chicken.png" alt="McChicken"/>
<div class="kosullar" title="lorem ipsum">Katılım Koşulları</div>
</div>
</div>
And the following is the css I have for the modal
.modal {
display: block;
overflow: auto;
z-index: 1001;
position: absolute;
height: 100%;
overflow: hidden;
padding-top: 77px;
padding-bottom: 10px;
opacity: 1 !important;
}
#chicken{
height: 100%;
color: #fff;
overflow: hidden;
text-align: center;
float:left;
}
#chicken img{
height: 100%;
float: left;
}
.kosullar{
color: #fff;
font-size: 10px;
height: 20px;
background-color: #2B9BC8 !important;
float: left;
position: absolute;
bottom: 15px;
padding: 2px;
text-align: center;
cursor: pointer;
border: 1px solid;
width: 100%;
}
As you can see in the css I have added 77px top padding to the modal class, so that it wouldn't overlap with my navigation bar. Other than that the modal should have the same height as the display and its width should be automatically calculated according to the aspect ratio of the image. This works very well on Chrome (and IE as well surprisingly), but it misbehaves on Firefox. On Firefox the image looks as it's supposed to, but the width of the modal is wider than it should be. To be specific, the width of the modal is what it should have been if there was no padding on the modal. How should I modify this css so that Firefox will calculate the width of the modal successfully. You can visit adwin.com.tr to see the problem for yourselves.
First of all mention <!DOCTYPE HTML> (in case of HTML5) if you have not mentioned and then try adding
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
in you modal class, this should help you solve the width issue.
Alternatively you can override the bootstrap's
*, *:before, *:after {
-moz-box-sizing: border-box;
}
to
*, *:before, *:after {
-moz-box-sizing: inherit;
}
You can also refer w3
try this:
#chicken img {
display: block;
float: none;
height: 100%;
margin: 0 auto;
}