HTML & CSS Please help me manage to adjust img size in my @media in CSS.

DBCGOOFY · Sep 26, 2022

So i have recently made a website and now i'm working on the format to get it in a good size for phones etc.
But for some reasons the pictures are not doing as i please, anyone able to give me some tips?
"See photo for current result."
I also added my HTML and CSS code.
I hope someone can help me.
Thanks in advanced.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="vieuwport" content="with=device-width, initial-scale=1.0">
    <title>Scum community</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Bungee+Spice&family=Poppins:[email protected];200;300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css'>
</head>

<!---Header-->
<section class="sub-header">
        <nav>
            <a href="index.html"><img src="images/LOGO.png"></a>
            <div class="nav-links" id="navlinks">
                <ul>
                  <li><a href="index.html">HOME</a></li>
                  <li><a href="about.html">ABOUT</a></li>
                  <li><a href="support.html">SUPPORT</a></li>
                  <li><a href="Media.html">MEDIA</a></li>
                  <li><a href="Serverad.html">Server Advertisement</a></li>
                </ul>
            </div>
        </nav>
        <h1>About us</h1>
</section>

<!----about---->
<section class="about-us">
    <div class="row">
        <div class="about-col">
            <h1>We are the biggest Scum community<h1>
             <p>We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community</p>
                <a href="" class="hero-btn">EXPLORE NOW</a>
        </div>
        <div class="about-col"></div>
            <img src="images/About.jpg"></a>
        </div>
    </div>
    
</section>

<!----footer---->
<section class="footer">
    <div class="wrapper">
        <a href="#" class="icon facebook">
            <div class="tooltip">Facebook</div>
            <span><i class="fab fa-facebook-f"></i></span>
          </a>
        <a href="#" class="icon facebook">
          <div class="tooltip">Facebook</div>
          <span><i class="fab fa-facebook-f"></i></span>
        </a>
        <a href="#" class="icon twitter">
          <div class="tooltip">Twitter</div>
          <span><i class="fab fa-twitter"></i></span>
        </a>
        <a href="#" class="icon instagram">
          <div class="tooltip">Instagram</div>
          <span><i class="fab fa-instagram"></i></span>
        </a>
      </div>
      <iframe src="https://discord.com/widget?id=793517738370138123&theme=dark" width="350" height="200" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>         
    <p>© Copyright 2022 Scum community. All Rights Reserved.</p>
</section>

CSS:

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
.header{
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(27, 13, 4, 0.7),rgba(27, 13, 4, 0.7)),url(images/background.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
}
nav{
    display: flex;
    padding: 2% 6%;
    justify-content: space-between;
    align-items: center;
}
nav img{
    width: 100px;
    height: 10%;
}
.nav-links{
    flex: 1;
    text-align: right;
}
.nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}
.nav-links ul li a{
    color: #fff;
    text-decoration: none;
}
.nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #ff6600;
    display: block;
    margin: auto;
    transition: 1s;
}
.nav-links ul li:hover::after{
    border: 1px solid #ff6600;
    background:#ff6600;
    width: 100%;
}
.text-box{
    width: 90%;
    color: #fff;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}   
.text-box h1{
    font-size: 50px;
}
.text-box p{
    margin: 10px 0 40px;
    font-size: 25px;
    color: #fff;
}
.hero-btn{
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover{
    border: 1px solid #ff6600;
    background:#ff6600;
    transition: 1s;
}

nav .fa{
    display: none;
}
/*-----Text color----------------------------------------------------------*/
h1{
    color: rgb(255, 255, 255);
    font-size: 36px;
    font-weight: 600;
}
p{
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}
/*-----support----------------------------------------------------*/
.support{
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
    background-color: rgb(39, 29, 23);
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}
.support-col{
    flex-basis: 31%;
    background: #ff6600;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.support-col:hover{
    box-shadow: 0 0 80px 0px rgba(198, 66, 0, 0.6) !important;
}
/*-----Media----------------------------------------------------*/
.media{
    width: 100%;
    margin: auto;
    text-align: center;
    padding-top: 30px;
    padding: 200px;
    background-color: rgb(35, 35, 35);
    background-position: 100%;
    box-sizing: border-box;
}
.media-col{
    flex-basis: 100%;
    border-radius: 50px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border-left: 50px;
}
.media-col img{
    width: 100%;
    direction: ltr 30;
}
.layer{
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover{
    background: rgb(255, 106, 0, 0.2);
}
.layer h3{
    width: 100%;
    font-weight: 500;
    color: #ff6600;
    font-size: 40px;
    bottom: 0;
    left: 0;
    transform: translateX(-5%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;

}
.layer:hover h3{
    bottom: 49%;
    opacity: 1;
}
/*-----links----------------------------------------------------*/
.links{
    width: 100%;
    text-align: center;
    pad: 30px 0;
    background-color: rgb(39, 29, 23);
}

.links h4{
    color: #fff;
    font-size: 40px;
    margin-bottom: 25px;
    margin-top: 600;
}
/*-----Social media buttons----------------------------------------------------*/
.wrapper .icon{
    position: relative;
    background-color: #ffffff;
    border-radius: 50%;
    margin: 10px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 22px;
    display: inline-block;
    align-items: center;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    color: #333;
    text-decoration: none;
  }
  .wrapper .tooltip {
    position: absolute;
    top: 0;
    line-height: 1.5;
    font-size: 14px;
    background-color: #ffffff;
    color: #ffffff;
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .wrapper .tooltip::before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    background-color: #ffffff;
    bottom: -3px;
    left: 50%;
    transform: translate(-50%) rotate(45deg);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .wrapper .icon:hover .tooltip {
    top: -45px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .wrapper .icon:hover span,
  .wrapper .icon:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
  }
  .wrapper .facebook:hover,
  .wrapper .facebook:hover .tooltip,
  .wrapper .facebook:hover .tooltip::before {
    background-color: #3b5999;
    color: #ffffff;
  }
  .wrapper .twitter:hover,
  .wrapper .twitter:hover .tooltip,
  .wrapper .twitter:hover .tooltip::before {
    background-color: #46c1f6;
    color: #ffffff;
  }
  .wrapper .instagram:hover,
  .wrapper .instagram:hover .tooltip,
  .wrapper .instagram:hover .tooltip::before {
    background-color: #e1306c;
    color: #ffffff;
  }
  .wrapper .github:hover,
  .wrapper .github:hover .tooltip,
  .wrapper .github:hover .tooltip::before {
    background-color: #333333;
    color: #ffffff;
  }
  .wrapper .youtube:hover,
  .wrapper .youtube:hover .tooltip,
  .wrapper .youtube:hover .tooltip::before {
    background-color: #de463b;
    color: #ffffff;
  }
/*-----About us page----------------------------------------------------*/
.sub-header{
    height: 35vh;
    width: 100%;
    background-image: linear-gradient(rgba(27, 13, 4, 0.7),rgba(27, 13, 4, 0.7)),url(images/About-us.jpg);
    background-position: center;
    background-size: cover;
    text-align: center;
    color: #fff;
}
.sub-header h1{
    margin-top: 100px;
}
.footer{
    width: 100%;
    text-align: center;
    pad: 30px 0;
    background-color: rgb(39, 29, 23)
}
 /*-----About us page----------------------------------------------------*/
.about-us{
    width: 100%;
    height: 60%;
    margin: auto;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: rgb(35, 35, 35);
    padding-left: 50px;
    padding-right: 50px;
}
.about-col{
    flex-basis: 48%;
    padding: 30px 2px;
}
.about-col img{
    max-width: 100%;
    height: auto;
}
.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25;
}

/*-----support----------------------------------------------------*/
.sup-support{
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(39, 29, 23);
}
.row{
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    }
    .support-col{
    flex-basis: 31%;
    background: #ff6600;
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.5s;
}
h3{
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.support-col:hover{
    box-shadow: 0 0 80px 0px rgba(198, 66, 0, 0.6) !important;
}
/*-----Media----------------------------------------------------*/
.sub-media{
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgb(39, 29, 23)
}
/*-----Server add----------------------------------------------------*/
.sup1-support{
    width: 100%;
    margin: auto;
    text-align: center;
    padding: 190px;
    box-sizing: border-box;
    background-color: rgb(39, 29, 23);
}
/*-----Mobile----------------------------------------------------*/
@media(max-width: 767px){
    .text-box h1{
        font-size: 10px;
        height: 14px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #ff6600;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px;   
    }
    .row{
        flex-direction: column;   
    }   
    .about-col img{
        max-width: 100%;
        height: auto;
    }
}

Johna · Sep 26, 2022

DBCGOOFY said:
But for some reasons the pictures are not doing as i please, anyone able to give me some tips?

So what exactly do you want it to do, and what is it doing instead?

DBCGOOFY · Sep 26, 2022

So the black and white img you see i cannot manage to make it smaller so it fits.
Anything i write in @media does not affect the picture and it stays the same for some reason.


@media(max-width: 767px){
.about-col img{
width: 50px;
height: 100px;
}
}

If i change these values is doesn't change the image.
The "images/About.jpg" is the image thats need to be changed.

HTML:

<!----about---->
<section class="about-us">
    <div class="row">
        <div class="about-col">
            <h1>We are the biggest Scum community<h1>
             <p>We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community We are the biggest Scum community
                We are the biggest Scum community We are the biggest Scum community</p>
                <a href="" class="hero-btn">EXPLORE NOW</a>
        </div>
        <div class="about-col"></div>
            <img src="images/About.jpg"></a> 
        </div>
    </div>
    
</section>

Johna · Sep 26, 2022

What if you add !important?
Also what is the </a> closing tag doing after the <img> element? I don't see the opening tag anywhere.

DBCGOOFY · Sep 26, 2022

Johna said:
What if you add !important?
Also what is the </a> closing tag doing after the <img> element? I don't see the opening tag anywhere.

Both don't really effect it.
i'm just not sure what i'm doing from this point anymore.

My Media max width is set to 700px yet the section it self is still 980x821 see picture.
Also to make it a little bit more easy i decided to just do a background instead of the picture next to the text.
So all i need is the background to fit in there.

Code for the background:

CSS:

.about-us{
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(27, 13, 4, 0.7),rgba(27, 13, 4, 0.7)),url(images/background.jpg);
    background-position: 8%;
    margin: auto;
    padding-top: 140px;
    padding-bottom: 100px;
}
.about-col{
    flex-basis: 50%;
    padding: 30px 2px;
    padding-left: 20px;
}
.about-col h1{
    padding-top: 0;
}
.about-col p{
    padding: 15px 0 25;
}

CSS code to adjust for mobile ratio:

CSS:

@media(max-width: 700px){
    .text-box h1{
        font-size: 10px;
        height: 14px;
    }
    .nav-links ul li{
        display: block;
    }
    .nav-links{
        position: absolute;
        background: #ff6600;
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 2;
        transition: 1s;
    }
    nav .fa{
        display: block;
        color: #fff;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul{
        padding: 30px; 
    }
}

Johna · Sep 26, 2022

Try adding background-size: contain; to make sure the whole background image fits in the parent element.

HTML & CSS Please help me manage to adjust img size in my @media in CSS.

DBCGOOFY

New Coder

Attachments

Johna

Full-Stack Web Developer

DBCGOOFY

New Coder

Johna

Full-Stack Web Developer

DBCGOOFY

New Coder

Attachments

Johna

Full-Stack Web Developer