The horizontal rule on the right overlaps the text in Safari on desktop and mobile.
How can I prevent the overlap?
http://codepen.io/simply-simpy/pen/EyENLr
h2 {
align-items: center;
display: flex;
font-size: 3.125vw;
margin-top: 0;
position: relative;
width: 100%;
}
h2:after {
border-top: 1px solid #000;
content: "";
display: block;
margin-left: 1.875vw;
width: 100%;
}
h2:before {
border-top: 1px solid #000;
content: "";
display: block;
margin-right: 1.875vw;
width: 100%;
}
.container {
align-items: center;
align-content: center;
text-align: center;
display: flex;
flex-direction: column;
}
<div class="container">
<h2>precision</h2>
</div>
Using flex-grow: 1; instead of width: 100%; on your h2:before and h2:after will solve the issue.
h2 {
align-items: center;
display: flex;
font-size: 3.125vw;
margin-top: 0;
position: relative;
width: 100%;
}
h2:after {
border-top: 1px solid #000;
content: "";
display: block;
margin-left: 1.875vw;
flex-grow: 1; /* <--- Replace */
}
h2:before {
border-top: 1px solid #000;
content: "";
display: block;
margin-right: 1.875vw;
flex-grow: 1; /* <--- Replace */
}
.container {
align-items: center;
align-content: center;
text-align: center;
display: flex;
flex-direction: column;
}
<div class="container">
<h2>precision</h2>
</div>
Related
The left most item is not aligned with the rest of the items. How to i center them correctly?
.activities{
display: flex;
align-items: center;
flex-direction: column;
padding-top: 25px;
background-color: #F3FAEF;
text-align: center;
}
.activities-image{
border-radius: 50%;
width: 150px;
height: 150px;
}
.activities-header{
font-size: 18px;
font-weight: bold;
}
.activities-cols{
display: flex;
align-items: center;
text-align: center;
}
.activity-col{
border: 1px solid red;
width: 330px;
height: 330px;
}
Demo: https://codepen.io/AdanRod133/pen/jOxPBEX
Full-page: https://codepen.io/AdanRod133/full/jOxPBEX
.activity-col {
border: 1px solid red;
width: 330px;
height: 330px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
I'm trying to duplicate this Div Skew Control that I created in a code-pen, that is working, but not responsive yet as I have not set the sizing(s). I'm trying to do the same in Elementor using the FlexBox method and can't seem to find the path/settings as it seems to break the layout when I try to even use the some css direct as show in the sample.
/*BEGIN FOOTER TEMPLATE*/
#media only screen and (max-width: 1440px)
{
HTML
{
font-size: 14px;
}
}
HTML BODY
{
font-family: "Montserrat", sans-serif;
}
.footer .footer-top
{
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-top .top-left
{
width: 45%;
min-height: 12rem;
padding: 0 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background-color: yellow;
position: relative;
}
.footer .footer-top .top-left::after
{
content: "";
display: block;
position: absolute;
top: 0;
left: auto;
right: 0;
bottom: 0;
width: 8rem;
height: auto;
background-color: yellow;
transform-origin: bottom right;
transform: skewX(-15deg);
}
.footer .footer-top .top-right
{
width: 55%;
padding-right: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-top .top-right .top-right-content
{
width: 45%;
}
.footer .footer-top .top-right .top-right-content .heading
{
margin-bottom: 0;
color: #D30200;
font-weight: 600;
line-height: 0.9;
text-transform: uppercase;
}
.footer .footer-top .top-right .top-right-content .sub
{
margin-bottom: 0;
font-weight: 600;
color: #FFF;
}
.footer .footer-middle
{
width: 100%;
display: flex;
justify-content: center;
align-items: stretch;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-left
{
width: 45%;
min-height: 12rem;
padding: 0 3rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background-color: #000;
color: #FFF;
}
.footer .footer-middle .middle-left H4
{
margin-bottom: 0;
font-weight: 500;
text-transform: uppercase;
}
.footer .footer-middle .middle-left H4 SPAN
{
color: #D30200;
}
.footer .footer-middle .middle-right
{
width: 55%;
padding-right: 2rem;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-right::before
{
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: 0;
width: 8rem;
height: auto;
background-color: #FFF;
transform-origin: top left;
transform: skewX(-15deg);
}
.footer .footer-middle .middle-right .footer-links-container
{
width: 60%;
position: relative;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
}
.footer .footer-middle .middle-right .footer-links-container UL
{
margin-bottom: 0;
list-style: none;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A
{
color: #000;
font-weight: 600;
}
.footer .footer-middle .middle-right .footer-links-container UL LI A:hover
{
color: #D30200;
}
.footer .footer-middle .middle-right .footer-logo-container
{
width: 40%;
text-align: center;
}
.footer .footer-bottom
{
color: white;
padding: 1rem;
background-color: #000;
}
.footer .footer-bottom P
{
font-size: 0.6rem;
margin-bottom: 0;
text-align: center;
}
.footer .footer-bottom A
{
color: white;
font-size: 0.6rem;
}
/*END FOOTER TEMPLATE*/
<!--bof footer-->
<footer class="footer">
<!--bof footer-top-->
<section class="footer-top">
<!--bof top-left-->
<div class="top-left"><strong>Text text text and more text text text, plus text text text</strong>
</div>
<!--eof top-left-->
<!--bof top-right-->
<div class="top-right">
<!--bof top-right-content-->
<div class="top-right-content">
<h2 class="heading">TEXT TEXT TEXT</h2>
<h4 class="sub">text text text text text text</h4>
</div>
<!--eof top-right-content-->
</div>
<!--eof top-right-->
</section>
<!--eof footer-top-->
<!--bof footer-middle-->
<section class="footer-middle">
<!--bof middle-left-->
<div class="middle-left">
<h4>TEXT TEXT TEXT <span>MORE TEXT TEXT</span></h4>
</div>
<!--eof middle-left-->
<!--bof middle-right-->
<div class="middle-right"><strong>Text text text and more text text text, plus text text text</strong>
</div>
<!--eof middle-right-->
</section>
<!--eof footer-middle-->
<!--bof footer-bottom-->
<section class="footer-bottom">
</section>
<!--eof footer-bottom-->
</footer>
<!--eof footer-->
The Elementor plugin is missing the transform function when you select a section and or div, it seems to only show the transform function when changing an element only inside a section/div and I'm looking to see if anyone else has run across this issue or knowns a way to make this work correctly.
Thank you in advance for any direction and or support provided.
I have a button that adds items to the grid when pressed, it looks like this at the moment:
As you can see, the grid container is stretched full width...but I want it to be the same width as the button and to only get stretched as more items get added, like so:
is this possible with CSS grid?
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 20px;
background: #777;
padding: 20px;
}
.item {
height: 100px;
background: white;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
You can approximate this using flexbox:
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
display: flex;
flex-wrap:wrap;
max-width:max-content; /* This will limit the container */
align-items: center;
background: #777;
padding:10px;
}
/* This is a hack to limit the grow effect*/
.grid:after {
content:"";
flex-grow:999;
}
/**/
.item {
height: 100px;
background: white;
flex-grow:1;
width:100px;
margin:10px;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
Or you consider some JS since you are already using JS:
var i=1;
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
i++;
document.querySelector('.grid').style.maxWidth=(i*100 + (i-1)*20)+'px';
});
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 20px;
background: #777;
padding: 20px;
max-width:100px;
}
.item {
height: 100px;
background: white;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
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>