Issue
very very new to coding but I'm mostly familiar with C and i ran into a problem while trying to set up my website, I have a computer and a laptop. my site looks just fine on my computer but when i swap to my laptop i notice my border/header goes off screen. as you can see in the code I've tried just about anything wrapping, taking away padding...! I want it to fit the screen and not go off screen for all resolutions (exluding on phones)
Sorry again if this isnt structured very well I'm very new to all of this but I'm having alot of fun!
Code: CSS
#maincontainer2
{
position:relative;
box-sizing: border-box;
background-repeat:no-repeat;
height: 100%;
width: 100%;
left:0;top:0;
max-width: 100%
max-height: 100%;
float:middle
}
body
{
height: 100%;
width: 100%;
display: table;
margin: auto;
box-sizing: border-box
margin: 0;
}
HTML
<div id="maincontainer2" class="container-fluid">
</div>
<img src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png"
object-fit: contain; position: absolute; float:absolute; box-sizing: border-box;
width:100%; height:100%; height: auto; max-width: 100%; left:0; right:0; >
Solution
You have so many wrong stuff:
- there is no
float: middle/absolute
- you are missing
style
attribute inimg
, but also you can use in CSS instead - you are missing
;
in some places - you are duplicating properties such as
height
Here is a minimalist version of your code
body {
margin: 0;
}
.image {
object-fit: cover;
width: 100%;
height: 100%;
}
<div id="maincontainer2" class="container-fluid">
<img class="image" src="https://media.discordapp.net/attachments/794994238038605904/998116976310353930/the_bg.png">
</div>
Answered By - dippas
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.