Website weird on rotating

So it looks like this portrait

and this vertical

How can I stop portrait having a white section at bottom

Oh I think I see what you mean – I think the issue that you’re encountering is the background-image is resizing to fit the screen, but it’s resizing based on the width (the width is always 100% of the available vertical space.) Unfortunately, in portrait mode, this means that the image is not large enough and leaves blank space at the bottom. I would need to see your code to know more, but one way you can often fix this is to have the background image be applied in CSS to the body (or another containing element) like this, and then adjust the background size:

body {
  background-img: url('path-to-my-background-img.jpg');
  background-size: cover;
}

What background-size will do is make sure that no matter what the size or dimensions of the element (in this case, body), the image will ALWAYS cover it. Sometimes this can result in the wrong part of the image being visible – in that case, check out the background-position attribute and play around with it until you like what you see!


Good luck! It looks beautiful! Please let me know if any of this needs further clarification or if I’ve misunderstood your question.

@househaunt I have that already

``/* owo, what’s dis? */

body {background-color: #353535; background: url(“https://cdn.discordapp.com/attachments/411670223796568064/582200878262648843/763d605a521901578244e6f50e473de6.jpg”) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
font-family: ‘Work Sans’, sans-serif;
font-weight: 300;
}

img.logo {
width: 70px;
height: 70px;
float: left;
margin-left: -4%;
padding-bottom: 1%;
}

.container {
width: 80%;
margin: 0 auto;
}

header {
background: rgba(0,0,0,0.5);
}

header::after {
content: ‘’;
display: table;
clear: both;
}

.logo {
float: left;
}

nav {
float: right;
}

nav ul {
margin: 0;
padding: 0;
list-style: none;
}

nav li {
display: inline-block;
margin-left: 50px;
padding-top:30px;

position: relative;

}

nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding-top: 25px;
padding-bottom:30px;
padding-left: 25px;
padding-right: 25px;
}

nav a::before {
content: ‘’;
display: block;
height: 5px;
width: 100%;
background-color: rgb(255, 255, 255);

position: absolute;
top: 0;
width: 0;

transition: all ease-in-out 250ms;

}

nav a:hover::before {
width: 100%;

}

/* GofvenX Intro Desc */

div.botInfoContainer {
text-align: center;
}

div.botInfoContainer2 {
background-color:rgba(0,0,0,0.5);
display: inline-block;
position: relative;
border-radius: 20px;

margin-top: 55px;
padding-top: 152.4px;
width:1143px;

}

div.botInfoDescription {
position: absolute;
top: 50px;
float: right;
}

#botInfoDescriptionTitle {
text-align: left;
position:absolute;
float: top;
text-shadow: 2px 2px 5px red;
color: rgb(213, 243, 255);
font-size: 33px;
top: 8%;
left: 33%;
}

#botInfoDescription {
text-align: left;
position:absolute;
font-size: 24px;
color: white;
width: 60%;
left: 33%;
top: 28%;
}

img.GofvenXpfp {
align-content: center;
width: 263px;
height: 263px;
border-radius: 200px;
position: relative;
display: block;
margin-top: -12%;
margin-bottom: 2%;
left: 2%;
float: left;

animation: fadeinGofvenXpfp 2s;
-webkit-transition: fadeinGofvenXpfp 2s ease-in;
-moz-transition: fadeinGofvenXpfp 2s ease-in;
-ms-transition: fadeinGofvenXpfp 2s ease-in;
-o-transition: fadeinGofvenXpfp 2s ease-in;
transition: fadeinGofvenXpfp 2s ease-in;

}

@keyframes fadeinGofvenXpfp {
from { opacity: 0; }
to { opacity: 1; }
}

@-webkit-keyframes fadeinGofvenXpfp {
from { opacity: 0; }
to { opacity: 1; }
}

div.botDescriptionContainer {
text-align: center;
margin-top: 35px;
padding-bottom: 210px;
}

div.botDescriptionContainer2 {
background-color:rgba(0,0,0,0.5);
display: inline-block;
position: relative;
width: 952.5px;
height: 565px;
border-radius: 2ch;
}

#botDescription {
text-align: left;
position: absolute;
font-size: 20px;
color: white;
width: 90%;
top: 0%;
left: 5%;
right: 5%;
}

a.getGofvenXlink:link {
color:rgb(0, 183, 255);
}

a.getGofvenXlink:hover {
color:rgb(152, 220, 247);
}

a.getGofvenXlink:active {
color:rgb(3, 94, 136);
}

a.getGofvenXlink:visited {
color:rgb(163, 163, 163);
}

#botInfoContainerLinks {
position: relative;
padding-top: 6%;
padding-right: 18%;
width: 500px;
height: 40px;
display:inline-block;
}

div.botInfoContainerLinksDivider {
display:inline-block;
text-decoration: none;
padding-right: 40px;
border-radius: 5px;
}

button.linkbutton {
background-color: rgb(28, 155, 206);
text-decoration: none;
font-family: “Trebuchet MS”, Helvetica, sans-serif ;
color:white;
font-weight: bold;
border: none;
border-radius: 8px;
padding-left: 4%;
padding-right: 4%;
padding-top: 2%;
padding-bottom: 2%;
font-size: 16px;
transition: all ease-in-out 250ms;
}

button.linkbutton:hover {
background-color: rgb(159, 198, 214);
}

div.endSpacer {
display: inline-block;
height: 0.5vh;
}``

Hmm interesting – it might mean that the body of the page isn’t spanning the whole screen, which seems a little odd. Could you share the name of your project? I can remix it and take a look.

It’s pollioweb.glitch.me @househaunt

What kind of device did you view the portrait mode on? I’m looking at it on a small scale in Firefox and also on an iPhone SE and I’m unable to replicate the behavior.

I was viewing it on a goole pixel using chrome @househaunt