I want to make my centered div text responsive on my website loader. The clue is I don't know how I am be able to do this. Im a learning coder so I hope someone can help me with my problem :)
NOTE! Load the snippet in full page so you can see the text :P
Here is the source code:
body {
overflow: hidden
}
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
z-index: 99;
/* makes sure it stays on top */
}
#camera {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
/* centers the loading animation horizontally one the screen */
top: 50%;
/* centers the loading animation vertically one the screen */
background-image: url(https://svgshare.com/i/6kD.svg);
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
margin: -150px 0 0 -150px/* is width and height divided by two */
}
#text {
line-height: 890px;
margin: auto;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
}
<div id="preloader">
<div id="text">Website loading...</div>
<div id="camera"></div>
</div>
What you want to be using here is display: flex; as that allows you to center elements both horizontally and vertially. This is also known as a flexbox.
Some other notes regarding the code, you should have the image as an image rather than a background image in this case, and it is much easier to use background-color: red; than using an image as a background color.
body,
html {
margin: 0;
padding: 0;
}
body {
overflow: hidden
}
#preloader {
position: fixed;
background-color: red;
z-index: 99;
/* makes sure it stays on top */
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
#camera {
height: 150px;
/* path to your loading animation */
background-repeat: no-repeat;
background-position: center;
background-size: contain;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
}
#text {
height: 100px;
line-height: 890px;
text-align: center;
color: white;
font-size: 20px;
font-weight: bold;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: row;
align-items: center;
justify-content: center;
text-align: center;
}
<body>
<div id="preloader">
<img src="https://svgshare.com/i/6kD.svg" id="camera">
<div id="text">Website loading...</div>
</div>
</body>
Cheers!
Should note:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
This just makes sure that the centring works on all browsers.
I think using flexbox here would be better idea
I have added flexbox styles for #preloader
#preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url(https://www.publicdomainpictures.net/pictures/200000/velka/plain-red-background.jpg);
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* makes sure it stays on top */
}
Here is the fiddle with other changes to make everything correct
Related
I am having issues with a nested flexbox container with an image inside of it. I need the image to maintain its 16x9 ratio always and would like the parent (or another div) to always be the exact size of the image, as I am using its coordinates to create a laser pointer feature and send it to other users.
I currently have the following Code:
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
max-height: 100%;
height: 100%;
width: 100%;
padding: 0 2rem 2rem;
}
#container > div {
position: relative;
max-height: 100%;
height: 100%;
max-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#container img {
height: auto;
max-height: 100%;
width: auto;
max-width: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>
The #inner div and image match size when the #container is wider than the image:
However, when the image is full width, the #inner div is taller than the image:
Removing the #inner height works for the smaller widths, however the image then blows out of the container as the screen gets wider:
I have also tried some other solutions, such as adding object-fit: contain; to the image, and using a ratio-class with a padding-top of 56.25%, but can't seem to get any of these solutions to be fully responsive.
Any ideas are much appreciated!
If I get the idea correctly should be like this.
html, body {
height: 100%;
}
body {
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#inner {
display: flex;
align-items: center;
justify-content: center;
}
#inner img {
max-width: 100%;
max-height: 100%;
}
<div id="container">
<div id="inner">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
</div>
Edit:
If you set your inner div as display inline block, it will always be the same size as the child image:
body{
margin: 0;
padding: 0;
box-sizing:border-box;
}
#container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
padding: 2rem;
box-sizing: border-box;
}
#container > div {
position: relative;
display: inline-block;
background: red;
font-size: 0;
box-sizing: border-box;
}
#container img {
height: auto;
width: 100%;
max-width: 100%;
display: block;
}
as in this example: https://jsfiddle.net/nzs21bem/
Is this what you are looking for?
You need to add some styles to your image so the ratio is preserved.
And display the image as a block element instead of the default inline style,
which has some padding to it.
.imgblock {
background: red;
margin: 30px;
}
.imgblock img {
width: 100%;
max-width: 100%;
}
.imgblock1 img {
display: block;
}
<div class="imgblock imgblock1">
<img src="https://dummyimage.com/1600x900/000000/fff">
</div>
That should make the parent the same size as the child image.
As you can see the difference in these 2 examples: https://jsfiddle.net/no1rqx6f/
I've got another question that I'm having trouble finding out the answer. I have a profile image that is huge, and I want to put a scaled down version of this picture in the top right of my navbar (similar to how StackOverflow has)
I'm running into a problem. It seems as though when I resize the image in the HTML code, the image no longer "obeys" the CSS rule to be at the absolute position, right 0%. Why is this?
Codepin: https://codepen.io/dansbyt/pen/bGpaPRj
CSS & HTML in question:
.profile{
position: absolute;
top: 15%;
right: 0%;}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
.profile img{float:right}
<div class="navbar">
<div class="profile">
<img src="http://mrdansby.com/Resources/ProfilePics/default.png" style="width:4%;border-radius: 50%">
</div>
</div>
according to your implementation, you have to define the image width exact measurements not like 4%, for example try changing this 4% to 40px and test it should work fine
CSS is superior against HTML, so if you set attribute height/width in html like
<img src="..." width="150">
And then use CSS
img {
width: 300px;
}
The image will be 300px and html attribute will be ignored.
You shouldn't mix inline CSS with external CSS, if not necessary (for example while css is generated via back-end (PHP), background images etc.)
Your problem is, that you are not positioning image as well, but his wrapper -> .profile
You should rewrite
.profile { position: absolute; top: 15%; right: 0%;}
to
.profile img{ position: absolute; top: 15%; right: 0%;}
Position absolute is not going to respect the parent size anymore.
absolute The element is removed from the normal document flow, and no
space is created for the element in the page layout. It is positioned
relative to its closest positioned ancestor, if any; otherwise, it is
placed relative to the initial containing block. Its final position is
determined by the values of top, right, bottom, and left. This value
creates a new stacking context when the value of z-index is not auto.
The margins of absolutely positioned boxes do not collapse with other
margins.
More info: Position info
I reworked on your codepen to fit with your expectation, but I will recommand to not use it as it is not flexible / responsive. I would recommand you to use bootstrap for this kind of element which is doing a great job.
Bootstrap 4
Bootstrap 4 navbar
body{
margin:0;
padding-top: 60px;
}
a.logo, a.logo img{
height: 100%;
}
a.logo{
display: inline-block;
padding-top: .3125rem;
padding-bottom: .3125rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.nav-container{
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box!important;
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.money{
/*position: absolute;
top: 15%;
right: 6%;*/
margin-right:30px;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
color: white;
}
.profile{
}
img.profile {
float:right;
}
.navbar{
top: 0;
left: 0;
width: 100%;
height: 56px;
z-index: 10;
position: fixed;
background-color: #5B7042;
border-bottom: 4px solid #3F5328;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.navbar_links{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
list-style: none;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
margin: auto auto auto 0;
}
.navbar_links a{
padding: 1% 1%;
display: block;
float: left;
font-family: 'Noto Sans JP', sans-serif;
font-size: x-large;
text-decoration: none;
color: white;
}
.navbar_links2{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.navbar_links a:hover {background-color: #3F5328}
.navbar_links span{position:relative; bottom:5px}
.navbar_links2 a{
width:40px;
display:block;
}
.navbar_links2 a img{
max-width: 100%;
border-radius: 50%;
}
<div class="navbar">
<a class="logo" href="../index.php"><img src="http://mrdansby.com/Resources/logo.png" style="width:auto;"></a>
<div class="nav-container">
<ul class="navbar_links">
<li>
<img style="width:30%" src="http://mrdansby.com/projects/i_house.png"><span> Dash</span>
</li>
</ul>
<div class="navbar_links2" style="margin-right:0;">
<div class="money">$100</div>
<img class="profile" src="http://mrdansby.com/Resources/ProfilePics/default.png">
</div>
</div>
</div>
I am trying to position Author designation under Author name, i tried few thing since theme is using flex i find it hard to make it work.
This them is using flex all over the place and if change one thing it breaks other thing.
How can i place Author Designation under the Author Name with minimal css changes
https://codepen.io/KGuide/pen/OJJBzmp
.article-container .article-thumbnail-wrapper {
height: 480px;
height: auto;
}
.article-thumbnail-info {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: absolute;
width: 100%;
left: 0;
bottom: 20px;
padding: 0 15px;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.article-author {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none !important;
}
.article-author figure {
margin: 0;
width: 50px;
height: 50px;
margin-right: 18px;
}
.article-author figure img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
Just wrapped two spans to div and aligned it to column with flex property:
https://codepen.io/Nevados/pen/mddzpYw
If the width of the image is static you can consider some margin trick. The 68px I am using is the width+margin for the image.
I removed some CSS to keep only the relevant one
.article-author {
display: flex;
flex-wrap: wrap; /* added */
/*align-items:center; removed */
text-decoration: none !important;
}
.article-author figure {
margin: 0;
width: 50px;
height: 50px;
margin-right: 18px;
}
.article-author figure img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Added */
.blog-detail-author {
flex-basis: calc(100% - 68px);
margin-top: 5px;
}
.blog-detail-designation {
margin-left: 68px;
margin-top: -25px; /* This one is a bit hacky, you may need to change it based on the font or other CSS*/
}
<div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center">
<div class="article-author">
<figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure>
<span class="blog-detail-author">Author Name</span>
<span class="blog-detail-designation">Author Designation</span>
</div>
</div>
Try With this :
HTML
<div class="article-thumbnail-wrapper blog-thumbnail-wrapper text-center">
<div class="article-author">
<figure class="article-author-avatar"><img alt="" src="http://themeflex.com/strucflex/en/structures/assets/img/avatar_2.jpg"></figure>
<span>
<span class="blog-detail-author">Author Name</span>
<span class="blog-detail-designation">Author Designation</span>
</span>
</div>
</div>
CSS:
figure + span {
display:flex; flex-direction:column;
}
I'm trying to put a checkbox with some text next to it to explain what the checkbox does. I want to make both their position absolute since their wrapper div has other things inside.
Although I put both of their top to the same value the checkbox appears to be higher up than the text.
I made a jsfiddle to explain what I mean: https://jsfiddle.net/9jx5t4xL/.
Should I just set the top of the checkbox a bit bigger than the text or is there a better way to align them vertically?
Using position and with % values wont be a good option instead of that you can use awesome flexbox layouts to easily achieve that as:
Code Snippet:
#wrapper {
height: 200px;
width: 250px;
border: 1px solid red;
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 24em;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
label {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
input {
margin: 0;
vertical-align: middle;
}
<div id="wrapper">
<label>Caption for input
<input type="checkbox" />
</label>
</div>
change your css of
p{
position: absolute;
top: 40%;
display: inline-block;
left: 5%;
}
#wrapper {
height: 200px;
width: 250px;
border: 1px solid red;
position: relative;
}
p{
position: absolute;
top: 40%;
display: inline-block;
left: 5%;
}
input{
position: absolute;
top: 50%;
display: inline-block;
left: 70%;
}
<div id="wrapper">
<p>Caption for input</p>
<input type="checkbox"/>
</div>
I have a jsfiddle here - http://jsfiddle.net/kw83kLmo/
It's justs a block of text that I need to center in the window.
The text needs a set width because I don't want it to be the full width of the container.
When the window gets smaller the text needs to stay in the center but get narrower.
In the example here it stays centered and responds until it get's to 600px then just stays that width.
I know I have set that width but I did that to center it
<div class="container-fluid ">
<div class="hero">
<div class="hero_heading text-center">
<h1>This is a heading This is a heading This is a heading </h1>
</div>
</div>
</div>
Update your h1 style like below.
.hero_heading h1 {
border: 1px solid red;
color: white;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
max-width: 600px;
}
DEMO
Edit on your code
.hero_heading h1{
border: 1px solid red;
color: white;
//top: 0; left: 0; bottom: 0; right: 0;
width: 600px;/*added*/
max-width:80%;/*to leave spaces around your text on responsive*/
margin:auto;/*changed*/
}
You no need to position your element for making it unless if you need
NOTE: Remove your position:relative; from .hero
DEMO
Edit your code like this :
.hero_heading h1{
border: 1px solid red;
color: white;
margin: 0 auto;
max-width: 600px;
position: absolute;
bottom: 0;
}
Demo
JSfiddle Demo
I took the positioning off the h1 and put it on the wrapping div.
CSS
.hero{
background-image: url(http://placehold.it/800x300);
background-size: cover;
position: relative;
height: 400px;
}
.hero_heading {
border: 1px solid red;
color: white;
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform:translateX(-50%);
transform:translateX(-50%);
max-width: 600px;
}
I'd go with:
.hero_heading{
border: 1px solid red;
color: white;
position: absolute;
width:50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
CSS flex can do the magic for you in a compatible way across most popular browsers including IE. Take a look at this JSFiddle
.hero{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-image: url(http://placehold.it/800x300);
background-size: cover;
height: 400px;
}
.hero_heading h1{
border: 1px solid red;
color: white;
max-width: 600px;
}