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
But I copied and pasted your code and I got what I posted above with the images all wonky, while it doesn't look that way for you.

Also your new code put back the "col-sm-4," so I am beyond confused why we're getting different things with the same code (aside from yours just not having the images, hence those not showing up). I have to be doing something wrong, but I don't get what, when I used your literal code exactly (as I was planning to compare them side-by-side).

This is what I got copying and pasting the code you posted.
 
Upvote 0 Downvote
You will need to troubleshoot the situation. My sample page works. But when you put it in with all of your other code it stops working. You will need to use the dev tools in the browser to find what other CSS in your whole codebase is breaking what I did and adjust/remove it. Again, for THAT SECTION. All your code may be needed for other parts of the page/site.

As far as the HTML for that section goes, the important part is that inside the .row div, everything becomes part of the grid. Everything. So you need to group related parts so each group is a grid item and only the groups are direct children of the grid (.row). How that is accomplished isn't really critical. I may have left .col-sm-4 in the HTML, but ONLY .col-sm-4 divs are direct children of .row (the grid) in my version.
 
Upvote 0 Downvote
Play Snayk 3+, higher dimensional snake game?
I clued in why your exact code wasn't working for me like for you - you didn't link to the CSS. Which makes sense, but obviously on my end, those links you had were valid and it was pulling in the CSS. I broke all the links to the CSS and got your results. That at least explains that. That's what was breaking my brain. 😆

I can fully restore the "style.css" and then it just breaks the footer, but for the same reason everything was breaking - it's the "bootstrap.min.css" file. But I have no idea how to mess around in THAT document. I didn't code that - it's the bootstrap code. I've never touched that file. That file is key to the menu working properly. It doesn't without it.

I can fix the footer only if I put it back where I had it (HTML) and restore the bootstrap code. If I leave it where you had it, it's not working correctly (it's too long). If I move it back, but don't restore the bootstrap code, it's a new box by itself.

So, this is what I get without the bootstrap file.
 
Upvote 0 Downvote
At this link:
TEST
inside the div with class .row you have a div with class .image. Inside that you have an image, a paragraph and another div with class .image. Inside that you have an image, a paragraph and another div with class .image.

All of the div with class .image (and their content still within them - the image and the paragraph) should be at the same level and not nested inside each other. Once you have that, you can apply the CSS grid code from my sample to div class .row. This should straighten that out a bit more.
 
Upvote 0 Downvote
I appreciate your attempt to help, but I honestly have no idea what you're saying with this last post.

I guess I'll just tell my friend it can't be done. Not by me anyway.

Thanks for trying.
 
Last edited:
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
DataCamp Advertisement
Code Academy 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