Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

Responsive columns question

LKinneyX23

LKinneyX23

Active Coder
I am not sure if this can be done with HTML and CSS, but thought I'd ask on here.

I help a friend with their website. There's a store page. As I don't even own a smart phone, I had no idea it's apparently frustrating for phone users.

I have it set up as a responsive site with rows/columns. On a phone, the three columns collapse into one. However, sites like eBay and Amazon, you can see 2-3 items in a row. Ex:

IMG_7985.webp

I have no idea why this is better, but apparently it's what people using the store would prefer to see.

I am curious if this is basic CSS/HTML and responsive code or something more complicated.

I am just using:

Code: 
<div class="row"><div class="col-md-12">

<div class="col-sm-4">Merch picture/text code here</div>

<div class="col-sm-4">Merch picture/text code here</div>

<div class="col-sm-4">Merch picture/text code here</div>

</div></div>

TIA!
 
Solution
tomliv
It can be done. A wrapper div around the image is optional, but I find it helps.

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Sample</title>
    <style>
        .row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .col-sm-4 img{
            display: block;
            width: 100%;
            height: auto;
        }
        @media (width >= 600px){
            .row{
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div class="row">

        <div class="col-sm-4">
            <div...
Sort by date Sort by votes
How do I know what dimensions? Also, wouldn't that make the pictures lower quality, making them smaller?

I am self taught and only barely passable at coding. Please feel free to talk down to me in explaining what to do. 🤣
 
Upvote 0 Downvote
Adjust as needed:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
            display: grid;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        .col-sm-4 img{
            display: block;
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    
    <div class="row">

        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here</p>
        </div>
    
    </div>
    
</body>
</html>
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Here's a more "manual" approach:

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .col-sm-4 img{
            display: block;
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        @media (width >= 600px){
            .row{
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div class="row">

        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/300/?blur" alt="" width="300" height="200">
            <p>Merch picture/text code here</p>
        </div>
    
    </div>
    
</body>
</html>
 
Upvote 0 Downvote
TY.

What made you pick 300px for grid-template-columns? I found I had to set it to 500px or I got super tiny, extra thin cut off images of the pictures (which are mostly 400x400).

And this didn't make items double up at all on the page on a phone. It's just a poorer version of what my own code was already doing - one item only on scrolling, but now the image isn't responsive and stays at the full size (because of the 500px setting, I know, but at 300px, it's not responsive, it just hacks off the image).
 
Last edited:
Upvote 0 Downvote
Here's my code, and it was tested not only in a browser but on both Android and iOS devices:


This creates 2 columns at phone widths. The 300 was random, and as I mentioned, adjust as needed. I don't know what all your code is besides the sample you provided, which didn't include CSS.

A better way for us to troubleshoot is to post a link to the page.
 
Last edited:
Upvote 0 Downvote
Okay, so something in my code is making it not look like your sample.

However, in both cases, the pictures are not resizing, they are being cropped. I need them to shrink, not cut off the image, otherwise the picture can't be seen clearly. Can that be done?

Looking to see if what my friend wants done can even be done with CSS/HTML before then making it work on the actual page.
 
Upvote 0 Downvote
It can be done. A wrapper div around the image is optional, but I find it helps.

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Sample</title>
    <style>
        .row{
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .col-sm-4 img{
            display: block;
            width: 100%;
            height: auto;
        }
        @media (width >= 600px){
            .row{
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    </style>
</head>
<body>
    
    <div class="row">

        <div class="col-sm-4">
            <div class="image"><img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200"></div>
            <p>Merch picture/text code here Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <div class="image"><img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200"></div>
            <p>Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <div class="image"><img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200"></div>
            <p>Merch picture/text code here</p>
        </div>
    
    </div>
    <div class="row">

        <div class="col-sm-4">
            <img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200">
            <p>Merch picture/text code here Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200">
            <p>Merch picture/text code here</p>
        </div>
        <div class="col-sm-4">
            <img src="https://picsum.photos/200/200/?blur" alt="" width="200" height="200">
            <p>Merch picture/text code here</p>
        </div>
    
    </div>
    
</body>
</html>
 
Last edited:
Upvote 0 Downvote
Solution
Sorry for the delay. I've been busy and I wanted to toss up a fake page I can actually share.

Here is me inserting the code into the website's coding:

TEST
(CSS file is here.)

As you can see, it makes a mess. I'm not sure how to correct this.

Thanks for the help!
 
Upvote 0 Downvote
LKinneyX23 said:
Sorry for the delay. I've been busy and I wanted to toss up a fake page I can actually share.

Here is me inserting the code into the website's coding:

TEST
(CSS file is here.)

As you can see, it makes a mess. I'm not sure how to correct this.

Thanks for the help!
Click to expand...
THe structure is wrong for what my code and styles are doing. Altering the structure and adding some CSS on the images gets it looking better:

1762292893575.webp
 
Upvote 0 Downvote
I'm not entirely clear what you changed. I can see it uncentered the top text though.

Do feel free to talk "down" to me. I've taught myself a lot, but it's a lot of trial and error with code, rather than fully understanding what I am doing. Coding is not my thing and it's way too complicated for websites now. :laugh:
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
@LKinneyX23 Take note of the structure changes I made in the circled area. The grid (<div class="row">) applied to the wrapper will include EVERYTHING inside it as an item to force into the grid layout. Compare this with yours. Notice also I moved the placement of the footer.

cf-highlight-changes.webp
 
Upvote 0 Downvote
Okay, I see you removed "col-sm-4." That did make large images, but they are in a single column for me now with the footer beside them.

I don't see how you moved the footer, I just see the text line I need between the items and the footer is gone.

Did you make changes to the CSS?

What is all the code under the closed body tag? Do I need that?
 
Upvote 0 Downvote
All changes I made were just in the dev tools as a way to trouble shoot.

I moved the footer to just before the closing body tag </body>. THat gets it out of the .row wrapper and no longer messes up the grid.

Here is some adjusted code with inline styles added - <div style="css here"></div>. The <center> element is deprecated and shouldn't be used. See the alternative I added.

HTML: 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    <link href="menu/bootstrap.min.css" rel="stylesheet" />
    <link href="menu/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="menu/ie10-viewport-bug-workaround.css" rel="stylesheet" />

    <title>TEST</title>
    <link href="menu/style.css" rel="stylesheet">



    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .col-sm-4 .image img {
            display: block;
            width: 100%;
            height: auto;
        }

        @media (width >=600px) {
            .row {
                grid-template-columns: 1fr 1fr 1fr;
            }
        }
    </style>




</head>

<body>
    <!-- Bootstrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>')
    </script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/js/ie10-viewport-bug-workaround.js"></script>


    <div class="container theme-showcase" role="main">
        <div class="content">

            <!-- navigation -->
            <nav class="navbar navbar-inverse navbar-static-top">
                <div class="container">
                    <img class="img-responsive pull-left" src="menu/images/header.png">

                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
                    </div>

                    <div id="navbar" class="navbar-collapse collapse">
                        <div class="links">
                            <img class="fluid" src="menu/images/social/imdb.png">
                            <img class="fluid" src="menu/images/social/instagram.png">
                            <img class="fluid" src="menu/images/social/youtube.png">
                        </div><br><br><br><br><br>

                        <ul class="nav navbar-nav navbar-right">
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ABOUT <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">MEDIA <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SHOP <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                </ul>
                            </li>
                            <li><a href="../contact">CONTACT</a></li>
                            <li class="dropdown">
                                <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">EXTRAS <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                </ul>
                            </li>
                        </ul>
                        <img class="img-responsive pull-left" src="menu/images/blackline.png">
                    </div>
                </div><br>
            </nav>
            <!--end navigation -->

            <!--introduction -->

            <div style="text-align: center;"><img class="fluid" src="banner.jpg" style="border:12px solid black;"></div><br>

            <div class="col-md-12">
                <div>

                    <p style="text-align: center;" class="purchase">Welcome to the Store! All merch is available for sale below and will go to charity. </p>

                    <p style="text-align: center;" class="purchase"><u>Do something good, get something great!</u></p>

                    <p style="text-align: center;" class="purchase">All prices include shipping (both domestic and international). </p>

                    <br>
                </div>
            </div>
            <!-- end introduction -->



            <!-- buy now items -->
            <div>
                <p style="text-align: center;" class="grand"><span style="color: #000000; font-size: 220%"><u>BUY NOW<br></u></span></p><br>
                <!-- view cart -->
            </div>



            <div class="row">

                <div class="col-sm-4">
                    <div class="image">
                        <img src="https://www.nonamia.ca/TEST/test.jpg" width="400" height="400">
                        <p class="voice">Text here</p>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="image"><img src="https://www.nonamia.ca/TEST/test.jpg" width="400" height="400">
                        <p class="voice">Text here</p>
                    </div>
                </div>

                <div class="col-sm-4">
                    <div class="image"><img src="https://www.nonamia.ca/TEST/test.jpg" width="400" height="400">
                        <p class="voice">Text here</p>
                    </div>
                </div>
            
            </div>
            
            <!-- End SOLD items -->
            <div>
                <p style="text-align: center" class="intro">Thank you all for participating.<br>Your generosity and commitment to the Greater Good never ceases to amaze me.</p>
            </div>
                
        </div>

        <div class="footer">
            <p class="footer">
                &copy; Footer text</p>
        </div>



        <!-- Image modal script -->
        <script>
            $(function() {
                $('.pop').on('click', function() {
                    $('.imagepreview').attr('src', $(this).find('img').attr('src'));
                    $('#imagemodal').modal('show');
                });
            });
        </script>

</body>

</html>
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
Here's what I see with my code. Please notice the structural differences in the dev tools. There cannot be anything else, including ::before or ::after pseudo elements applied by other parts of your CSS.

Screenshot 2025-11-06 at 8.41.20 PM.webp


Screenshot 2025-11-06 at 8.41.27 PM.webp
 
Upvote 0 Downvote
You've removed all the other coding though. I need the header, background, etc.

Is not possible to have the page with the header, background, all of that and have the images display this way? If not, then I guess we can't do that.

My friend might be fine with losing the background for this page, but the header 100% has to be there, as is.
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom