My site working well on all browsers and devices -- with the exception of Google Chrome on a large screen, which applies a margin-top of somewhere around 200-300px. I have been trying to debug using the Chrome Console but I haven't seen any differences in the source code. Has anyone else experienced this? Below is the spacing for the elements in question.(Chrome Error)(Firefox Working)(View Page Here)
.column {
flex: 50%;
display: flex;
/*height: 100vh;*/
justify-content: center;
align-items: center;
}
.colone {
height: 100vh;
justify-content: center;
align-items: center;
}
Related
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.
I have been developing a website using bootstrap-4 and I am using a container class (responsive class on bootstrap) on this title inside of my . The only problem I have is that my navbar has half transparency and it is going to the top of the page and if you click on the image you see a white box and I would like the text to be restricted to that size in those borders lines.
Link to image
The reason I would not like to use top or bottom is that it messes up with my responsiveness on mobile devices etc.
I also believe that one of the reasons this is getting issues is because of my header.
Here is some code
<header>
<div class="container">
<h2>"We specialise in interiors and upholstery for automobiles</h2>
<p>supercars, classic cars, modern cars and motorbikes."</p>
</div
.
Here is my css for the header
height: 30vh;
position: static;
background-size: cover;
background-image: url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png";
.
Not 100% sure on any of the display properties that the .container class would use in Bootstrap as I don't use it. But adding display: flex; to .container and using flexbox will do the trick.
CSS Code:
header {
/* change height accordingly */
height: 30vh;
position: static;
background-size: cover;
background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
width: 100%;
}
.container {
height: 100%;
width: 100%;
display:flex;
align-items: center;
justify-content: flex-end;
flex-flow: column nowrap;
}
Codepen Link
https://codepen.io/oliverheward/pen/jOEvPby
Better browser support:
header {
/* change height accordingly */
height: 30vh;
position: static;
background-size: cover;
background-image:url("https://i.gyazo.com/7802614bc17ae16529be7d3628cd3552.png");
width: 100%;
}
.container {
height: 100%;
width: 100%;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
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%;}
I am designing my personal website and some codes doesn't work in safari.
it's my website url
http://hoomansanjabi.ir
I want to centre my logo.
I'm thinking safari has problem with this codes:
.header {
text-align: center;
display: flex;
-webkit-justify-content: center;
justify-content: center;
flex-direction: column;
}
Let's check this fiddle:
img {
float: left;
}
#inner {
height: 128px;
background-color: yellowgreen;
display: table-cell;
vertical-align: middle;
}
#content {
background-color: red;
}
<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
<div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>
this works so far as I expect - text is centered, and as you shrink the width, text goes underline: but then its "too far" from the image. The best would be if the vertical-align: middle; became vertical-align: top; when it needs to jump. How to do it without possibly jQuery?
A simple way to achieve this is to use a CSS Media Query.
Your markup would stay the same and your CSS would only need to have the following added:
#media screen and (max-width: 290px) {
#inner {
vertical-align: top;
}
}
in action: http://jsfiddle.net/uWMkH/1/
What that says is, "When the viewport's width is no more than 290px, do this stuff to #inner.
Take a look at these links for more information:
http://www.w3.org/TR/css3-mediaqueries/
http://cssmediaqueries.com/
http://css-tricks.com/css-media-queries/
The caveat with using media queries to do this is that they aren't supported in IE8 and below. I hope you don't have to deal with those headaches!
Look here for a complete list of browsers with support:
http://caniuse.com/#feat=css-mediaqueries
You can do this without media queries, but it requires a browser that supports the entire CSS Flexible box module (most browsers are missing support for wrapping). At this point in time, support is limited to Opera, Chrome, and IE10.
http://codepen.io/cimmanon/pen/rFdkt
figure {
display: -ms-flexbox;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-color: yellowgreen;
}
#supports (flex-wrap: wrap) {
figure {
display: flex;
}
}
figcaption {
-webkit-flex: 1 15em;
-ms-flex: 1 15em;
flex: 1 15em;
background-color: red;
}
What Flexbox offers over media queries is the ability to reflow the content based on the available space, not just the browser width.