• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

DBCGOOFY

New Coder
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;
    }
}
 

Attachments

  • Help.jpg
    Help.jpg
    161.2 KB · Views: 10

DBCGOOFY

New Coder
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>
 

DBCGOOFY

New Coder
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; 
    }
}
 

Attachments

  • Help1.jpg
    Help1.jpg
    50.6 KB · Views: 5
Last edited by a moderator:
Top