Kevin Powell - Community•2y ago

I need help on making projects section responsive

how can i make this on responsive way, i've been trying so hard but still i can't help it

20 Replies

Unknown User•2y ago

Message Not Public

Mannix•2y ago

I see u use grid so I would put the grid-template-columns in a min-width media-query

samidevOP•2y ago

@Mr.Life.Hacker ye i will elaborate it in better way so besically this code is in @media queries

 
.portfolio {
        display: grid;
        grid-template-columns: repeat(1fr, 1fr);
    }
    .portfolio-img {
        display: grid;
        align-items: center;
        justify-content: center;
        width: 100;
    }
    .btn-text {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

 
.portfolio {
        display: grid;
        grid-template-columns: repeat(1fr, 1fr);
    }
    .portfolio-img {
        display: grid;
        align-items: center;
        justify-content: center;
        width: 100;
    }
    .btn-text {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

 <section class="portfolio" id="portfolio">
        <div class="heading">
            <h2>Portfolio</h2>
            <span>Our Recent Work</span>
        </div>
        <div class="portfolio-content">
           
              <div class="portfolio-card">
                <div class="portfolio-img">
                    <img src="img/blog-1.jpg" alt="">
                </div>
                <div class="card-content">
                    <h2>Euro Kuvajt Warehouse Company</h2>
                    <h3>Web Design</h3>
                    <p>This Website was created by me for a warehouse company, which is placed in Macedonia/Skopje.</p>
                    <a href="#" class="btn-text" style="color: blue;">
                        <span class="span">See Project</span>

                        <i class="bx bxs-right-arrow-alt"></i>
                   </a>
                </div>
            </div>

 <section class="portfolio" id="portfolio">
        <div class="heading">
            <h2>Portfolio</h2>
            <span>Our Recent Work</span>
        </div>
        <div class="portfolio-content">
           
              <div class="portfolio-card">
                <div class="portfolio-img">
                    <img src="img/blog-1.jpg" alt="">
                </div>
                <div class="card-content">
                    <h2>Euro Kuvajt Warehouse Company</h2>
                    <h3>Web Design</h3>
                    <p>This Website was created by me for a warehouse company, which is placed in Macedonia/Skopje.</p>
                    <a href="#" class="btn-text" style="color: blue;">
                        <span class="span">See Project</span>

                        <i class="bx bxs-right-arrow-alt"></i>
                   </a>
                </div>
            </div>

samidevOP•2y ago

samidevOP•2y ago

samidevOP•2y ago

so when it is in mobile i want it to be the picture above the text

Mannix•2y ago

what media-query did you use then?

WebMechanic•2y ago

what's grid-template-columns: repeat(1fr, 1fr); supposed to do? the 1st value should be a number or one of auto-fill/auto-fit

Mannix•2y ago

create 2 equal columns

WebMechanic•2y ago

no it doesn't. repeat() takes a number and then the values/sizes that need repeating. Equal columns would be: grid-template-columns: 1fr, 1fr;

WebMechanic•2y ago

Mannix•2y ago

oh yeah i didn't even noticed that it should be repeat(2, 1fr)

WebMechanic•2y ago

looks better 🙂 fwiw that's more characters and "too complex code" for what a simple 1fr, 1fr would do. I only use repeat for the auto-* guys or if there are plenty of same size patterns to be repeated, that would be hard to read and count if typed out manually.

samidevOP•2y ago

@mannix_ here

samidevOP•2y ago

and still cant fix ittt i fix it but now i have problem how can i put image in the middle

samidevOP•2y ago

samidevOP•2y ago

Mannix•2y ago

try justify-content: center; on the parent of that image

WebMechanic•2y ago

poor clients trusting you with their web projects ... 🙈🙊

samidevOP•2y ago

bro acting like he is better , while he use bootstrap 😉 but dw about it i fixed it in all devices so ye

Gaming

Programming

I need help on making projects section responsive