I'm trying to reduce the space of the gray box while keeping the images centered, but I dont know what property to use. I'm using flex box if that helps.
.layout {
display: flex;
flex-wrap: wrap;
}
.child {
min-height: 100px;
width: 200px;
background: rgba(185, 180, 169, 0.226);
flex: calc(100% / 3);
text-align: center;
line-height: 100px;
border: 5px solid white;
}
Remove the border for your child element
Set few codes in css
img {
border: 0;
outline: 0;
}
.child{
border: 0;
}
Related
I've got a wrapper div that's vertically and horizontally centered, and then two more divs inside it that are intended to share the space of the wrapper in a 50/50 split. When I add an image ('fireplace') to the topmost div ('wall'), even though the image should have no trouble fitting in the allocated space, the wall div is expanding its height vertically and ends up taking more than the intended amount of space in the wrapper. Here's the CSS code for the divs and the image in question:
.wrapper {
display: grid;
place-items: center;
height: 85vh;
width: 85vw;
}
#container {
background-color: antiquewhite;
z-index: 0;
height: 100%;
width: 100%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}
#wall {
background-color: darkred;
z-index: 1;
width: 100%;
height: 100%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.fireplace {
height: 20vh;
width: auto;
}
Setting the height of the container and the wall to be 42.5vh (half of the wrapper size) seems to fix this behavior.
I would like to have my search bar aligned to the left and approximately a 1/4 of the size it currently is (so it ends above the About Us Section).
I would also like to make a border around it in #03c5b3.
Can anyone assist with this - I have tried several options lifted from other sites but nothing that is specific to my requests. I used:
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row-reverse
}
.woocommerce-product-search input {
border-radius: 0 40px 40px 0;
border-left: 0
}
.woocommerce-product-search button:before {
content: "seach";
font-family: "Arial";
text-align: center;
display: inline-block;
font-size: 15px;
}
.woocommerce-product-search button {
font-size: 0px;
background-color: #fafafa;
color: #666666;
border: 1px solid #cccccc;
border-right: 0;
border-radius: 40px 0 0 40px;
}
.woocommerce-product-search {
border-radius: 40px;
overflow: hidden;
display: flex;
flex-direction: row;
}
.left {
position: absolute; important
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
However this didn't align it left and the border was too thick and the box not centred in the middle. Seemed like too many new issues to fix!!
https://sfxraynew.johnstoncommunications.co.uk/
Thanks
Something like this maybe? https://prnt.sc/MxKEpN2sTeIu
#header-right-section {
display: flex;
align-items: center;
justify-content: space-between;
}
#header-right-section #header-right-sidebar {
order: 1;
}
#header-right-section nav#site-navigation {
order: 2;
}
#header-right-section .header-action {
order: 3;
}
I have been tweaking my CSS to make my page look good on mobile and other sizes of the window. I got it to mostly look good, but the only thing I don't like is when the window is medium sized (for like a tablet) there are 2 boxes on one line and the third on the second. This looks really bad in my opinion. Is it possible when the third box gets pushed to the second line, to make all three into a column and upgrade the size of each box a bit to fill some of the empty space?
I've been looking into flex-grow/shrink and I'm not really understanding them to see if that's what I need. I also know there's a media query thing, but don't really understand that either. Here is my current page which doesn't resize: www.catherinemeza.com
Below is my tweaked code so far: (comments are old code or something I've tried to make stuff resize)
body {
background-color: #e9cffb;
margin-top: 100px;
}
.About {
font-size: 20px;
}
.Name {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
#All {
height: 500px;
/* width: 1500px;
margin: 50px auto; */
/* border: 5px solid black; */
/* box-sizing: content-box;
width: 100%; */
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
#ALL > * {
flex: 1 1 0;
}
#One {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #One p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
} */
/* #One:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
} */
.Two {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* .Two p {
width: 500px;
height: 500px;
position: absolute;
margin-left: 10px;
bottom: -600px;
z-index: 1;
transition: 1s;
text-align: center;
color: rgb(218, 202, 228);
background-color: rgb(7, 70, 21);
border: .5px green solid;
border-radius: 20px;
}
.Two:hover p {
opacity: .7;
bottom: -10px;
width: 500px;
height: 175px;
} */
#Three {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #Three p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
}
#Three:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
}
a {
text-decoration: none;
font-size: 20px;
color: chartreuse;
} */
The link you provided doesn't work for me, but you can solve this using media queries and flexbox. What you want to do is open dev tools so you can see the current width of your page in pixels. Resize your page down to the point you want to change (for your case, when the third box goes into the second row). Create a media query for when the screen is that px or less, which you can then add styles to edit the boxes' width and layout. I included an example below.
Breaking it down, this code is saying that when the screen width is 992px or lower, make #All a column-layout and align the items at the center. Also, change the width of each box to take up 100% of its container. You can edit the styling as you wish but if you have any questions don't be afraid to ask!
#media screen and (max-width: 992px) {
#All {
flex-direction: column;
align-items: center;
}
#One, .Two, #Three {
width: 100%;
}
}
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
I have this simple div with a button inside of it. justify-content: center; works fine using Firefox and Chrome, but does not work on IE 11:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
}
<div id="div">
<button id="button">HELLO</button>
</div>
My goal is that, when I use transform with rotate(90deg) or rotate(270deg), the button will fit into the div:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
The height and width of the div and button are always the same, but are customizable.
As much as possible, I prefer not wrapping elements.
IE11 needs the parent to have flex-direction: column.
This example has your button rotated:
#div {
height: 200px;
width: 50px;
border: 1px solid black;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column
}
#button {
height: 50px;
width: 200px;
min-width: 200px;
border: 1px solid black;
background-color: red;
transform: rotate(90deg);
}
<div id="div">
<button id="button">HELLO</button>
</div>
In my case I had to make the flex container's height 100%. justify-content worked without a problem after that.
I also had to make the (first level) children's max-width 100% to fix some content overflowing horizontally.