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;
}
Related
So, I have a roundish card that my client don't want to get rid off, but the dynamic text will always be larger than the card itself. I have to limit the characters at first and then show the full text on hover and he want's me to zoom in the card so it can be larger to fit the text. How do I do that? I've been trying scale and width with ch, but on hover I cannot change the width since it only zooms in.
I'm using Angular 9, Typescript and Scss.
.model-list {
display: flex;
width: 65rem;
height: 55vh;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow-y: scroll;
scrollbar-width: none;
.model-card {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 20px;
padding: 10px;
width: 16rem;
height: 5rem;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
cursor: pointer;
.text {
width: 13rem;
display: flex;
flex-direction: column;
padding: 16px;
.name {
font-size: 15px;
font-weight: bold;
color: #626c75;
margin: 0px;
width: 100%;
}
.description {
display: flex;
flex-direction: row;
font-size: 14px;
color: #dce1e7;
margin: 0px;
width: 17ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.icon-container {
width: 5rem;
height: 5rem;
img {
width: 100%;
height: 100%;
}
}
&:hover,
&.active {
transform: scale(1.2);
.name,
.description {
width: 60ch;
color: white;
}
}
}
}
I have this custom bullet point type thing and I want to have the number centered inside a circle. I'm doing pretty good however I'm stuck at centering. I literally just want the text to go up by a couple pixels, why is that so hard to do.
const ProjectTitle = styled.h1 `
margin:0;
&:before {
content: "1";
font-size: 2rem;
border: 1px solid black;
padding: 0px 18px 6px 18px;
border-radius: 50%;
margin-top: 10px;
margin-right: 10px;
position: relative;
}
`
Mixing px and rem values to achieve alignment can be problematic as you don't know what the rem value will actually be.
This snippet instead uses flex to position the number centrally and makes the size of the circle dependant on rem value rather than padding with px.
h1 {
` margin: 0;
}
h1::before {
content: "1";
font-size: 2rem;
width: 3rem;
aspect-ratio: 1 / 1;
border: 1px solid black;
border-radius: 50%;
margin-right: 10px;
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
<h1>Testing</h1>
According to your code, the solution can be padding modification
h1 {
margin: 0;
}
h1::before {
content: "1";
font-size: 2rem;
border: 1px solid black;
padding: 6px 18px; /* Aligned with 4 sides of the content*/
border-radius: 50%;
margin-top: 10px;
position: relative;
}
<h1>
Testing
</h1>
I am creating a calendar layout using flexbox. I am getting an extra gap before my first box:
Below is my code. Could anyone suggest what is creating this additional gap and how I can remove it?
Thank you in advance.
html {
font-size: 62, 5%;
box-sizing: border-box;
}
*,::before, ::after {
box-sizing: inherit;
}
body {
font-size: 1.6rem;
padding: 0;
margin: 0;
display: flex;
flex-direction:column;
}
header.header-news {
& > button {
position: absolute;
top: 0;
height: 100%;
opacity: .5;
&.last {
right: 0;
}
}
& > div.header-news_container {
display: flex;
}
& > div {
flex: 1 0 0;
}
min-height: 18rem;
position: relative;
}
section.main-content {
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-left: 1rem;
}
.main-content__day {
aspect-ratio: 1/1;
width: calc(100% /7 - 1rem);
display:flex;
border: 1px solid rgba(0, 0, 0, .3);
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
transition: .5s;
}
There were recently 3 component boxes, but the middle one was not needed anymore, so I just deleted it.
Yet, when I deleted the middlebox(blue color), the 2 remaining boxes became too far apart and it doesn't make it look nice.
How do I move the far-right red box closer to the middle to align with the yellow box?
code
#import '../../scss/variables.scss';
.dashboard {
&__module {
padding: 20px 20px 50px 20px;
flex-basis: 30%;
flex-grow: 0;
color: $white;
&:nth-child(1) {
background-color: $orange;
}
&:nth-child(2) {
background-color: $red;
}
&:nth-child(3) {
background-color: $blue;
}
a {
color: $white;
}
}
&__module_header {
border-bottom: 2px solid white;
padding-bottom: 5px;
display: flex;
}
&__module_title {
display: inline-flex;
flex: 1 0;
}
&__module_title_link {
justify-self: flex-end;
font-weight: bold;
}
&__module_row {
border-bottom: 1px solid white;
padding-bottom: 5px;
padding-top: 15px;
padding-bottom: 15px;
}
&__module_stat_container {
display: flex;
justify-content: flex-start;
&.primary {
font-size: 18px;
.dashboard__module_stat {
font-weight: bold;
}
}
}
&__module_stat {
width: 20px;
text-align: right;
margin-right: 10px;
}
&__module_date {
width: 50px;
text-align: right;
margin-right: 10px;
font-weight: bold;
}
&__module_subtext {
font-size: 14px;
display: block;
}
}
#media screen and (max-width:920px){
.dashboard__modules_container {
display:block !important;
width: 100%;
.dashboard {
&__module {
padding: 20px 20px 50px 20px;
margin-bottom: 20px;
width: 100%;
position: relative;
display: block;
flex-basis: 100%;
flex-grow: 0;
color: $white;
}
}
}
}
SOLUTION:
switch
justify-content: space-between;
to
justify-content: space-evenly;
I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.
It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.
The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.
What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!
EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.
Before Browser height reduction ---> After
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
font-size: 0;
min-width: 0;
min-height: 0;
background-color: yellow;
}
.context {
display: flex;
min-height: 0;
background-color: blue;
}
.content img {
height: 100%;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
}
.primary img {
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mobile .nightMode .primary img {
border-style: solid;
border-width: 3px;
border-color: black;
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary"><img src="https://via.placeholder.com/200">
<div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
</div>
<div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div></div>
</div>
</div>
</div>
I think this could be a possible solution, #img1 being the first of the secondary images:
img {
max-width: 100%;
}
#img1 {
height: 20vw;
max-height: 150px;
min-height: 75px;
}
.primary img {
height: 50vw;
max-height: 200px;
}
These rules address the question, although there are still some issues with this approach that could be of importance.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}