I've tried putting together a simple scenario with css for a card style layout.
It looks ok on a 22 inch monitor, but when viewed on my samsung tv 1920x1080 resolution it does not look good.
It looks like the border has a white gap in it caused by anti-aliasing.
html
<main>
<div class="card-holder">
<div class="card-header">
<div class="card-icon">
<span class="icon icon-bell"></span>
</div>
<span class="card-title">Title</span>
</div>
<div class="card-about">
<span>Some about text.</span>
</div>
</div>
</main>
css
.card-holder {
border-radius: 10px 10px 0px 0px;
border: 3px solid rgb(0, 0, 0);
border-spacing: 0;
overflow: hidden;
width: 300px;
}
.card-header {
display: flex;
align-items: center;
padding: 5px;
background-color: rgb(0, 64, 255);
color: #fff;
overflow: hidden;
}
.card-title {
display: inline-block;
flex-grow: 1;
text-align: center;
}
.card-about {
display: block;
}
.card-icon {
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background-color: white;
overflow: hidden;
height: 64px;
width: 64px;
}
.icon {
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
height: 48px;
width: 48px;
vertical-align: middle;
}
.icon-bell {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bell-black.svg);
}
When I zoom the browser to 80% then a white line appears at the right hand side of the card.
Is there a recommended approach to make this scenario work nicely across different zoom levels and monitor resolutions?
I've been tearing my hair out.
Update
I made a codepen here
You're mixing relative and fixed units. Things like em and % will be different based on the browser, device, and zoom. Try using all relative or all fixed so the browser isn't trying to interpret them differently.
Example:
border-radius: 10px 10px 0 0;
vs
border-radius: 1em 1em 0px 0px;
Related
I have a question feel troubled CSS settings need everyone's help -
requirements are as follows:
a picture of a button, the picture has a text
design draft marked above the button is the size of the picture must be 200px width of the text must be 26px
text In the middle of the picture, the upper and lower spacing between the picture and the picture is 8px. The example shown in the figure below needs to be achieved.
But I can’t do it anyway. I hope you can provide some solutions to let me know how to deal with this kind of demand. Thank you Everyone
.btn{
display: inline-block;
width: 200px;
height: 100px;
background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-size: 140%;
}
.txt{
font-size: 26px;
text-align: center;
padding: 16px;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
Your background is misleading you to believe that it matches the button position and size (if you add a border to the .btn style you will see what I mean)
So if your background is yellow and need a blackborder better to style it, is faster than loading a button image and scale it.
.btn{
position: relative ;
display: inline-block;
width: 200px;
height: 42px; /* 8 + 26 +8*/
border: 5px solid black ;
background-color: yellow ;
border-radius: 25px ;
/* to center the text vertically using flex*/
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.txt{
font-size: 26px;
text-align: center;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
first make sure no margin is defined by default by adding margin: 0px;
2ndly, Add a line-height property to it using line-height: 1.5;
There are several other ways, but this should be the fastest
.btn{
display: inline-block;
width: 200px;
height: 100px;
background-image: url('https://upload.cc/i1/2021/09/12/IX7D1d.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-size: 140%;
}
.txt {
font-size: 26px;
text-align: center;
padding: 16px;
margin: 0px;
line-height: 1.5;
}
<a class="btn" href="javascript:;">
<p class="txt">send</p>
</a>
I'm working on a website that has sections with text on one side and a background image on the other. In one section everything is working fine. When I resize my browser the background image is responsive and scales down. But in the next section, the background image is not responsive, the image actually gets bigger when I resize my browser and I have no idea why. (I've only been learning how to code for about a month so I'm hoping the answer is glaringly obvious)
Here's the css from the section that works:
#welcome {
margin-top: 34px;
padding-top: 0px;
padding-bottom: 0px;
height: 120vh;
background-color: #dae7e9;
}
#welcome .box1 {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 55%;
height: 120vh;
}
#welcome .box2 {
width: 45%;
overflow: hidden;
background-image: url("https://i.ibb.co/c6txf7Y/Gabriel-Venneri1-3.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
And here's the css from the section that doesn't:
#about {
background-color: #5d5c61;
}
#about h1 {
color: #123c69;
margin-bottom: 0;
}
#about .box1 {
width: 40%;
background-image: url("https://i.ibb.co/k6mNw42/IMG-6333-2.jpg");
background-size: cover;
background-position: center;
border: 1px solid black;
}
#about .box2 {
width: 60%;
}
The HTML:
<section id="about">
<div class="container-1">
<div class="box1"></div>
<div class="box2">
<h1>About</h1>
<p>Text</p>
</div>
</div>
</section>
I've been trying to find a solution for a week and a half so any help would be greatly appreciated
Here is a link to the site, the about section image is the issue: https://codepen.io/gvenn/full/XWNzeqW
I need center to center some text on X and Y axes. I noticed that my text is not on full height, which is best solution to give text full height?
I tried to center with:
1. Line height
2. Transform
3. Flex
4. Table - table cell - vertical align
HTML:
<div class="block">
<p> 3 </p>
</div>
SCSS:
.block {
display: table;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
What I meant with full height
This height really matter, for Small font it's not visible but with
Large font it's really un-centered.
I expect to center this text.
I think flex is the best and universal method to center element on X and Y, so add
display: flex;justify-content: center;align-items: center; to you parent block. After that you can use anyone font-height what you want.
.block {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
padding: 0 10px;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
background-color: #ecf3f5;
border: 1px solid #c9dee4;
margin-right: 20px;
}
p {
line-height: 20px;
}
<div class="block">
<p> 3 </p>
</div>
I found the problem, un-alignment was caused by font family, in my case I used Helvetica, after change text alignment fixed.
https://giphy.com/gifs/SYFl4xIvOdFS6e8X9q/html5
I was wrote this source code just for example, I was manual enter padding-top 90px for h2 tag for example what i want; but when remove padding text is not centered vertical. This is not problem when i know bluebox div height but some times this is 200px, some times 900px.
.bluebox
{
width: 400px;
background-color: blue;
height: 200px;
}
.bluebox h2
{
font-family: Arial;
font-size: 10pt;
text-align: center;
padding-top: 90px;
}
<div class="bluebox"><h2>Hi i am a text, now I am only horizontal centered<h2></div>
Demo: http://jsfiddle.net/5UJWa/
.bluebox {
width: 400px;
background-color: blue;
height: 200px;
position: relative; /* allow absolute positioning within */
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
position: absolute; /* positioning */
top: 50%; /* 50% from the top (half way) */
margin-top: -5pt; /* bring it back up half the height of your text size */
width: 100%; /* to allow for the text align */
}
Example at http://jsfiddle.net/zTPgh/1/ - Change the height of the container and run or update to see it in action.
You can play with display: table-cell;.
Your new CSS:
.bluebox {
width: 400px;
background-color: blue;
height: 150px;
display: table-cell;
vertical-align: middle;
}
.bluebox h2 {
font-family: Arial;
font-size: 10pt;
text-align: center;
}
Check out the illustration on jsFiddle.
See my tutorial here which will vertically align and center text and images. DON'T rely on line-heights as you'll have huge gaps between lines of text. http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html
I have Create one demo for vertical image center and text also i have test on firefox ,chrome,safari, internet explorer 9 and 8 too.
It is very short and easy css and html, Please check below code and you can find output on screenshort.
HTML
<div class="frame">
<img src="capabilities_icon1.png" alt="" />
</div>
CSS
.frame {
height: 160px;
width: 160px;
border: 1px solid red;
white-space: nowrap;
text-align: center; margin: 1em 0;
}
.frame::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content:"";
}
img {
background: #3A6F9A;
vertical-align: middle;
}
For aligning an element vertically center, I have used css3 calc() function. It's perfectly working in all the latest browsers including ie11 and edge.
Check it live here https://jsfiddle.net/ashish_m/ebLxsxhk/
.calcTest { width: 250px; height: 250px; border:1px solid #e0e0e0; text-align: center; }
.calcTest .calcTestInner { width: 50px; height: 50px; background: #e0e0e0;
margin: 0 auto; margin-top: calc(50% - 25px); vertical-align: top; }
<div class="calcTest">
<div class="calcTestInner">
Hello Folks
</div>
</div>
I have a content area that should behave in the following way:
Content is centered vertically if there's no vertical overflow (currently achieved via display:table/-cell)
No scrollbar is displayed unless there is vertical overflow
the height of the containing div never changes
I've only been able to satisfy the first point - fiddle:
http://jsfiddle.net/PTSkR/125/
Here's my html:
<div class="row-fluid card-box">
<div class="span4 side-study-box">
<div class="side-box-content">
<pre class="text-content-saved">TEST
TEST</pre>
</div>
</div>
</div>
Css:
.side-study-box {
background-color: white;
color: black;
border: 1px solid #3D6AA2;
text-align: center;
height: 160px;
max-height: 160px;
display: table ;
margin: 0px ;
margin-left: -1px;
position: relative;
overflow-y: scroll ;
}
.side-study-box .side-box-content {
width: calc(100%);
height: 160px;
float: right;
display: table;
overflow-y: scroll ;
background-color: white;
}
/*#region CONTENT AREAS */
/*#region TEXT CONTENT */
.side-study-box .text-content-saved {
width: calc(100%+29px);
font-size: 24px;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 160px !important;
max-height: 160px ;
background-color: white;
padding: 0px ;
margin: 0px ;
border: 0px ;
overflow-y: scroll;
}
Unfortunately I can't use js as part of the solution... is this possible with only css?
You can use overflow:auto; to achieve the second point and set the following:
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
fiddle: http://jsfiddle.net/PTSkR/134/
Keep in mind that since you are using a pre tag, it means that all the white spaces and line breaks formatting counts so any white space or extra line could cause the overflow and you might miss that. See here