Problem with CSS image sizing in DIV

HTML-CSS
1

Hello, i’m having a problem sizing images inside of DIV in a footer, everywhere else it works but suddenly in Footer it just wont size for life of me. Sorry for a messy CSS, please focus on footer only, i need help trying to figure out problem with image sizing inside of div here.

<footer>
        <div id="footer-container">
            <div id="footer-container-content">
                
                <div id="footer-information" class="footer-content">
                    <h3>EntertainmentTime</h3>
                    <p>Newspaper is your news, entertainment, music fashion 
                    website. We provide you with the latest breaking news and videos straight from the entertainment industry.</p>
                    <ul>
                        <li><i class="fa-brands fa-facebook-square"></i></li>
                        <li><i class="fa-brands fa-youtube"></i></li>
                        <li><i class="fa-brands fa-twitter-square"></i></li>
                    </ul>
                </div>

                
                <div id="footer-recent" class="footer-content">
                    <div id="footer-recent-title">
                        <h3>RECENT POSTS</h3>
                    </div>
                    <div class="footer-recent-container">
                        <div class="footer-recent-img">
                            <img src="images/niko_i_hunter.jpg">
                        </div>
                        <div class="footer-recent-description">
                            <h3>Niko and Hunter have extended their contracts with G2 Esports</h3>
                        </div>
                    </div>
                    <div class="footer-recent-container">
                        <div class="footer-recent-img">
                            <img src="images/niko_i_hunter.jpg">
                        </div>
                        <div class="footer-recent-description">
                            <h3>Niko and Hunter have extended their contracts with G2 Esports</h3>
                        </div>
                    </div>
                    <div class="footer-recent-container">
                        <div class="footer-recent-img">
                            <img src="images/niko_i_hunter.jpg">
                        </div>
                        <div class="footer-recent-description">
                            <h3>Niko and Hunter have extended their contracts with G2 Esports</h3>
                        </div>
                    </div>
                </div>
    
                <div id="footer-categories" class="footer-content">
                    <div id="categories-title">
                        <h3>CATEGORIES</h3>
                    </div>
                    <div class="category">
                        <a href="">Games</a>
                    </div>
                    <div class="category">
                        <a href="">Movies</a>
                    </div>
                    <div class="category">
                        <a href="">Reviews</a>
                    </div>
                    <div class="category">
                        <a href="">Technology</a>
                    </div>
                    <div class="category">
                        <a href="">Videos</a>
                    </div>
                </div>
                
                
            </div>


            <div id="footer-copyright">
                <div>© 2020 @ BootstrapDash. All rights reserved.</div>
                <div>Handcrafted by BootstrapDash</div>
            </div>
        </div>
    </footer>

    width: 1200px;
    margin: 0 auto;
    padding: 20px 10px;
    
}

footer > #footer-container > #footer-container-content {
    display: flex;
    justify-content: space-between;
}

footer > #footer-container > #footer-containter-content >.footer-content {
    width: 373px;
}


footer > #footer-container > #footer-containter-content > .footer-content > .footer-recent-container {
    display: flex;
    justify-content: space-between;
}

footer > #footer-container > #footer-containter-content > .footer-content > .footer-recent-container > .footer-recent-img {
    width: 80px;
    overflow: hidden;
}

footer > #footer-container > #footer-containter-content > .footer-content > .footer-recent-container > .footer-recent-img > img {
    width: 100%;
    vertical-align: bottom;
}
type or paste code here
2

what if you do footer img { instead?

3

Same problem unfortunately. It’s like CSS is suddenly broken

4

Check for typos.

Hint:

#footer-containter-content

<div id="footer-container-content"></div>

As an aside, your selectors are way too over-specified. You should use selectors that are as flat as possible. If an element doesn’t need a scope to be targeted you should use the selector that most directly matches the element. You should be able to target elements as location-independent as possible for maximum reusability and flexibility. Use modifier classes so that your selectors are rarely if ever location dependent. There should be very few cases where you need to target the elements based on their location in the DOM.

5

A post was merged into an existing topic: I can’t seem to figure out basic CSS

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.