guys, can't understand how it works.
.butts {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-left: 40px;
}
.butt {
width: 120px;
height: 50px;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
Want to change button size with resizing the browser.
put for properties "padding" in button class.
Or
Change height and width button.
auto-resize buttons for responsive design
you can refer to this answer for your issue as you can set the max-width:100% for the whichever button to resize in your browser.
Related
I want to set the height of a child tag to 100% but as soon as I redirect to another page the height remains same disabling the page to scroll.
Image 1.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
backdrop-filter: blur(2px);
}
This style without setting the height makes the first page look half but the second page which is 'Create' looks perfect and scrollable.
Image 1
Image 2.css
body{
background: url("Resources/Cash.jpeg");
}
html,body{
margin: 0;
padding: 0;
height: 100%;
}
#root{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.account{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 30px;
height: 100%;
backdrop-filter: blur(2px);
}
But after adding height to html,body,account and root, the home page looks perfect but the 'Create' page has 'Height' of 100% so it fits the page and becomes unable to scroll.
Image 2
React Html Outer body
<div id="root">
<div class="account">
<!-- Content -->
</div>
</div>
Is there a way so the final output Home looks like image 2 and the Create page looks like image 1
Not sure how you are setting the height exactly, but if you are using the same container for both pages, then I can think of two solutions out of the box:
Give the height CSS property to the component that is displaying the content, not the parent container that is wrapping it.
Use className, and change them dynamically. This can be done with the help of React.useState hook. Set the className to be one thing when it is on the first page and change it when you move to the second page. And Match those classNames in your CSS files.
I have this <h4> tag:
<h4>
A Java and Kotlin coder.
</h4>
which has this CSS applied to it (inherited from body):
body {
font-family: jetbrains-mono;
background-color: #444;
color: #EEEEEE;
font-size: 18px;
max-width: 650px;
line-height: 1.2;
display: grid;
align-items: center;
margin: auto auto;
}
Here is the result:
using just align-content: center yields the same result.
Problem is, if I use a flexbox to center the text instead of a grid, like this:
display: flex;
align-items: center;
justify-content: center;
this is what happens:
How can I fix this?
the full html file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/index.html
and the full css file is here: https://github.com/TheOnlyTails/theonlytails.com/blob/main/style.css
For this to become a column you need the flex-direction: column; property. Add it to the container to which you added the display: flex property like so:
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
I hope this fixes your problem.
I have two questions.
first,
I have a form and I'm trying to center everything to the center of it and in the same time align the text to the left side of the fields.
I'v tried to give justify-center and align-items to the "container" class and to the "form-style" class and nothing works.
Part of the code and a Codepen link
.form-style {
width: 50%;
position: relative;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
And,
.container {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
}
Second,
I'm trying to make my submit button to get 100% width and nothing - there's space at the sides,
input[type="submit"] {
display: block;
background-color: #08ABD9;
font-family: 'jura', sans-serif;
font-size: 16pt;
font-weight: bold;
height: 40px;
border: none;
margin-top: 40px;
margin-bottom: 0px;
width: 100%;
}
Start here: There's a syntax error in your code. The display: flex on the container is not being recognized due to the presence of an invisible character. None of the flex properties are working.
So first fix that. Just delete the line entirely and re-write display: flex. You will notice major changes in your layout.
Second, your flex-direction is set to column on your label/input containers. That stacks your form elements vertically.
#fname, #email-a, #phone, #dropdown, #mrole, #age, #textbox {
display: flex;
flex-flow: column wrap;
width: 100%;
margin-left: 40px;
}
If you want the text and input to line up in a row, use flex-direction: row.
Lastly, with regard to your submit button, your container has left and right padding which prevents the button from reaching the edges.
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Once you remove the padding rules, the button will extend from edge to edge.
I am pretty new to HTML/CSS and have begun trying to learn CSS flexbox layout. Just working on a simple site recreation from scratch using flexbox.
In full screen, the image positioning on the logo looks good. However, when shifting around the screen size, my nav bar on the right side responds but the logo image on the left does not. I believe I have set it up correctly though.
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
Here's a link to my work as well: https://codepen.io/gkunthara/pen/VWdrYj
What exactly am I doing wrong? Any tips on the type of positioning I'm doing with flexbox or with flexbox, in general, are appreciated!
Remove Position
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}
Remove position on nav & set max-width: 100% on logo image.
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100
Lately I was creating a searchbox for my website, but I wanted it to be constantly centered in every y and x dimension.
I have div container searchbox:
.searchbox {
position: absolute;
text-align: center;
width: 100%;
left: 0%;
top: 55px;
height: 115px;
background-color: black;
}
Inside searchbox container, I made special mover container:
.mover {
margin: 0 auto;
width: 50%;
}
As you see width is 50% because I thought it would center it, but it didn't, and margin is automatic, which I don't think even works without 50% width.
Full code and Result.
I think my style is kinda messed up and there are useless things which may affect automatic margin.
What may the problem be? does margin: auto; doesn't work with current position of div? What do I need to change? If not, what's the problem?
I will be very thankful if you upload solution on my current fiddle.
UPDATED ANSWER
Here is correct code: https://jsfiddle.net/uda77168/7/
First...
1. Removed all absolute, top, left, right, bottom CSS properties.
Reason: Absolute positioning is generally a bad thing to do, because it gives sites an unresponsive layout.
2. I've also removed float CSS properties.
Reason: float is not bad, but it's unnecessary if you're using flexbox.
3. Set .search {width: 100%}
Reason: make the search bar bigger.
4. Removed width properties for #condition and #stattrack.
5. Made the margins more consistent.
6. Placed <label> before <select>.
Center Vertically
1. <body> is the flexbox that will center things vertically. In order for that to work, the width and height for <html> and <body> have to be defined.
html, body {
width:100%;
height:100%;
}
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. Next, we need to define <body> as a flexbox and give it some flexbox properties:
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
You can just copy-paste flexbox code like the one above from here.
Center Horizontally
1. Create a div around .statbox, .conbox, and .rarbox, and give it a width and make it a flexbox (again, the flexbox code is copied):
<div class="horizontal-flexbox"></div>
.horizontal-flexbox {
width: 100%;
display: flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
2. I've also set .statbox, .conbox, and .rarbox each to be 33.3% width long. Added together, that's 99.9% – just under 100%.
.horizontal-flexbox > div {
width: 33.3%;
margin-top: 10px;
}
3. I've also included some other stuff, but that's not important. Make sure you learn flexbox, it's real useful!
Your input.search class has a specified width in px which is larger than the container.
.search {
width: 100%;/*changed this line*/
height: 35px;
margin-top: 20px;
margin-left: 0 auto;
margin-right: 0 auto;
border: solid 1px black;
border-radius: 7px;
}
However using percentages can lead to unpredictable layouts when viewed on different screen resolutions.
Use this:
.searchbox {
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
}
And
.mover{width:50%;}