In safari, i can't make the text move to the middle of the box.
Its always on the top. How do i make the text stay in the middle of the box?
here is my code i'm working on:
http://jsfiddle.net/cyberjo50/B62XX/
#menu {
clear: both;
height: auto;
font-family: Arial, Tahoma, Verdana;
font-size: 1em;
/*padding:10px;*/
margin: 5px;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
font-style: normal;
font-weight: 400px;
flex-flow: row wrap;
justify-content: space-around;
}
#menu a:link {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:visited {
display: block;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: yellow;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
color: #1689D6;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:hover {
display: block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
#menu a:active {
display:block;
color: #fff;
width: 100px;
height: 50px;
padding-top: 15px;
padding-bottom:auto;
padding-right:5px;
padding-left:5px;
background-color: red;
/*border: 1px solid #cccccc;*/
margin:5px;
display: flex;
flex-grow: 1;
align-items: center;
text-align: center;
justify-content: center;
font-style: normal;
font-weight: bold;
font-size: 85%;
/*start the fix here*/
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
}
Thanks in advance
Try to add this in css for #menu and play further with numbers and tweaking:
text-align:center; line-height:50px;
Related
I have a Sidebar which is built using FlexBox column layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
// display: flex;
// flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
And looks like:
This is when I comment out flex layout (ideally which I want to keep). But when I enable flex layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
for some reason it forces the image to be shifted to top and it can't be scrolled to the view:
One way would be to get rid of flexbox and somehow align the items to center but I am more interested in understanding how can I achieve the same with FlexBox and what exactly it is that's pushing the image to cut off when flexbox is applied.
I have created this html code and CSS for you:
.main {
width: calc(100%/3 + 60px);
font-family: 'Jost', sans-serif;
}
.SideBarContainer {
display: flex;
flex-direction: column;
}
.name {
margin: 0;
font-size: 30px;
}
.desig {
color: #bcbcbc;
font-weight: 600;
}
.profile-img {
border-radius: 100%;
height: 100px;
width: 100px;
object-fit: cover;
}
.btn {
background-color: #f5f5f5;
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 20px;
margin: 10px 0;
width: fit-content;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
.btn.dark {
background-color: #000;
color: #f3ff26;
text-transform: capitalize;
font-weight: 400;
font-size: 18px;
width: calc(100% - 60px);
border-radius: 8px;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
<div class="main">
<div class="SideBarContainer">
<img src="https://via.placeholder.com/150x150" class="profile-img" />
<h6 class="name">Rampy sharma</h6>
<span class="desig">Individual Singer</span>
Edit
<p>It is a long established fact that a reader will be distracted by the readable that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
portfolio
</div>
</div>
I have simple navigation bar with position:sticky that displays not clear when scrolled and everything seems to work fine then it is in the top.
As you can see from the images above there seems to be some render problem. Here is the css:
body{
/*For demo purpose*/
height:300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
overflow-x: hidden;
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help{
display:block;
transition:0s !important;
}
div#help{
height:200vh;
white-space: normal;
}
div#help a{
color:red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
Don't mind the color. I use a plugin so you will see everything in white, not in black.
Strangely I couldn't get the example to work properly and I can not represent the issue. Hopefully you can take a look at my code and tell what may cause this problem.
After much fiddling, the culprit is:
overflow-x: hidden;
body {
/*For demo purpose*/
height: 300vh;
}
* {
font-family: RobotoThin;
margin: 0;
padding: 0;
/* overflow-x: hidden; <-- The problem */
outline: none;
-webkit-transition: 1s;
transition: 1s;
box-sizing: border-box;
background-repeat: no-repeat;
transition: 0.5s !important;
scroll-behavior: smooth;
}
div.window {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
box-sizing: border-box;
padding: calc(2vh + 2vw);
height: 100vh;
width: 95vw;
position: absolute;
right: 0;
top: 0;
display: none;
white-space: nowrap;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #ecf0f1;
margin-left: 5vw;
}
#help {
display: block;
transition: 0s !important;
}
div#help {
height: 200vh;
white-space: normal;
}
div#help a {
color: red;
text-decoration: none;
}
div#nav {
top: 0;
position: sticky;
display: flex;
justify-content: space-between;
color: black;
background-color: white;
padding-top: 1vmax;
padding-bottom: 1vmax;
font-size: 1.2vmax;
flex-wrap: wrap;
border-radius: 10em;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
div#nav>a {
color: black;
}
div#nav>*:hover {
color: gold;
letter-spacing: 0.3vw;
}
div#nav> :first-child {
margin-left: 1vw;
}
div#nav> :last-child {
margin-right: 1vw;
}
<body>
<div class='windows' id='help'>
<div id='nav'> <a>General important info</a> <a>Desktop</a> <a>Math calculators</a> <a>Notes</a> <a>Battery</a> <a>Quotes</a> <a>Settings</a> <a>Passwords and Data</a> </div>
</div>
</body>
I'm trying to have a circular tag pinned in the top right corner.
By the way it's cropped:
Here is my html
<div class='row'>
<div class='product'>
<div class='discount'>
<span class='green'>
40%
</span>
</div>
<div class='product_header'>
10 luglio
</div>
<div class='product_inner'>
<img src='https://images-na.ssl-images-amazon.com/images/I/61eHXu2AgXL._SL1000_.jpg' width='300'>
<p>Nike Air (Women)</p>
<p>Size 7</p>
<p class='price'>
Price £199.99
</p>
<button>guarda offerta</button>
<button>Storico prezzi</button>
</div>
<div class='product_overlay'>
<h2>Added to basket</h2>
<i class='fa fa-check'></i>
</div>
</div>
</div>
And here the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
}
.row {
width: 100%;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.product {
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
.product .discount {
position: absolute;
right: -10px;
top: -10px;
}
.product .discount span.green {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
border-radius: 100%;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: #5EA226;
width: 3em;
height: 3em;
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
}
.product img {
max-width: 100%;
height: auto !important;
text-align: center;
}
.product_inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
.product_inner p {
color: black;
}
.product_inner .price {
color: red;
font-size: 2em;
}
.product_inner button {
border: 1px solid black;
color: #000;
font-size: 1em;
border-radius: 3px;
padding: 0.5em 3em;
margin: 1em 0 0 0;
background: none;
cursor: pointer;
-webkit-transition: background ease-in .25s;
transition: background ease-in .25s;
}
.product_inner button:hover {
background: rgba(255, 255, 255, 0.5);
color: green;
}
.product_inner button:before {
font-family: FontAwesome;
content: '\f07A';
color: #000;
position: absolute;
font-size: 1.5em;
margin: 0 -1.5em;
}
.product_inner button:hover:before {
color: green;
}
.product_overlay {
background: rgba(255, 255, 255, 0.9);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.product_overlay h2 {
color: rgba(43, 45, 66, 0.7);
font-size: 1.2em;
margin: 1em 0;
}
.product_overlay i {
color: rgba(43, 45, 66, 0.7);
font-size: 1.5em;
}
The cropped tag is in the top tight corner, I try with z-index but I don't understand what is the issue...
I also have a codepen
change this:
.product{
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
overflow: hidden;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
to this:
.product{
box-shadow: 1px 5px 15px #CCC;
background-color: white;
width: 15em;
height: auto;
padding: 2em;
margin: 1em;
position: relative;
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
}
I am trying to remove the text-decoration of a flex child when the parent is the anchor. I've tried all of the following code, and it is not working at all. I've created a jsFiddle, and on that the underline shows all the time and not on hover. In my WordPress installation, it only shows on hover. I'm really not sure what to do! Any help is appreciated!
Thank you ahead of time!!!!
.fleximagebox_link:hover, a.fleximagebox_link:hover, a .fleximagebox_link:hover,
.fleximagebox_link a:hover, .fleximagebox_link:hover a,
a .fleximagebox_link p:hover, .image_background:hover, .image_background:hover a,
a .image_background:hover, .image_background.fleximagebox_link a:hover,
a .image_background.fleximagebox_link:hover {
text-decoration: none!important;
}
Here is the jsFiddle that explains what I'm talking about: https://jsfiddle.net/Clare12345/th60mde3/2/
This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }
As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }
.flexbox_images a {
text-decoration: none;
}
.main_box {
background: white;
height: 400px;
width: 100%;
margin: 0 auto;
padding: 0px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.main_box .flexbox_images {
color: white;
width: 100%;
padding: 0px;
overflow: auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flexbox_images a {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.image_background {
height: 250px;
margin: 0 auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
max-width: 101%;
}
.image_background_left {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-end;
margin-right: -1px;
}
.image_background_right {
background-repeat: no-repeat;
background-size: contain;
background-image: url(http://pipsum.com/350x240.jpg);
justify-content: flex-start;
margin-left: -1px;
}
.fleximagebox_link {
font-size: 28pt;
background: rgba(255, 255, 255, 0.85);
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 130px;
}
.image_background_left .fleximagebox_link {
justify-content: flex-end;
padding-left: 35px;
}
.image_background_right .fleximagebox_link {
justify-content: flex-start;
padding-right: 35px;
}
.image_background_right .fleximagebox_link p {
font-size: 28pt!important;
color: #000!important;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 1.5px;
margin-bottom: 0px;
}
.main_black_bar {
width: 3px;
background: #000;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: -1px;
}
.image_background_left .main_black_bar {
margin-left: 35px;
}
.image_background_right .main_black_bar {
margin-right: 35px;
}
<div class="main_box">
<div class="flexbox_images">
<a href="">
<div class="image_background image_background_left">
<div class="fleximagebox_link">Buy
<div class="main_black_bar"> </div>
</div>
</div>
</a>
<a href="">
<div class="image_background image_background_right">
<div class="fleximagebox_link">
<div class="main_black_bar"> </div>Sell</div>
</div>
</a>
</div>
</div>
How can I ensure the text in this flexbox
Line 1 - 2B Phillies
Line 2 - Acquired by: Draft 2001 (1-15)
Appears on 2 rows but aligned around the center of the picture? Aligned to the top would be ok if centring is too complex.
HTML:-
<!doctype html>
<html lang="en">
<head>
<title>gameplan.org.uk | A site for enthusiasts by enthusiasts.
</title>
<link href="test.css" rel="stylesheet">
</head>
<header>Header</header>
<div id='main'>
<article>Player Page
<p>
<div class='playercontainer'>
<div class='playerbox1'>
<img src='800803.jpg' alt='Chase Utley'>
2B Phillies
<p>Acquired by: Draft 2001 (1-15)</p>
</div>
<div class='playerbox2'>Player WAR</div>
<div class='playerbox3'>Player Details</div>
</div>
</p>
</article>
<nav>Menu</nav>
<aside>Stuff</aside>
</div>
<footer>Footer</footer>
</body>
CSS:-
body {
font: 24px Helvetica;
background: #999999;
color: rgba(0, 0, 0, .25);
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main,
#page {
-webkit-flex-flow: column;
flex-flow: column;
}
#main > article,
#main > nav,
#main > aside {/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
/*On the flex container*/
.playercontainer {
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
-webkit-flex-wrap: wrap;/* Safari */
flex-wrap: wrap;
-webkit-justify-content: center;/* Safari */
justify-content: center;
-webkit-justify-content: space-around;/* Safari */
justify-content: space-around;
}
.playerbox1 {
border-style: solid;
border-color: #0000ff;
-webkit-order: 1;/* Safari */
order: 1;
-webkit-flex: 0 0 60%;
flex: 0 0 60%;
margin: 5px;
height: 135px;
}
.playerbox2 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 30%;
-webkit-order: 1;
/* Safari */
order: 2;
margin: 5px;
}
.playerbox3 {
border-style: solid;
border-color: #ff0000;
-webkit-flex: 1 1 30%;
/* Safari */
flex: 0 0 80%;
-webkit-order: 1;
/* Safari */
order: 3;
margin: 5px;
}
Test site is here
Give this properties to the flex container
flex-direction: column;
justify-content: center;
There's an awesome cheatsheet to flexbox on css-tricks, i'll leave the link here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/