KPC
Kevin Powell - Community•14mo ago
GrapDes

the right way to do responsive

                        <div>
                           <a href="#" class="text-decoration-none ">
                                <div class="img-wrapper d-inline-block" id="img-1">
                                    <img src="assets/img/Literature.png" alt="Literature">
                                </div>
                                <p>Literature</p>
                            </a>
                            <button class="btn btn-primary w-100 fw-bold" style="width: calc(100%-#img-1);">Quiz</button>
                        </div>
                        <div>
                           <a href="#" class="text-decoration-none ">
                                <div class="img-wrapper d-inline-block" id="img-1">
                                    <img src="assets/img/Literature.png" alt="Literature">
                                </div>
                                <p>Literature</p>
                            </a>
                            <button class="btn btn-primary w-100 fw-bold" style="width: calc(100%-#img-1);">Quiz</button>
                        </div>
i have these a bunch of them like it and i'm doing responsive where they look like this , the issue is i wanna retrieve the width of the img's and give it to property width for button selector here's the link
No description
3 Replies
GrapDes
GrapDesOP•14mo ago
MarkBoots
MarkBoots•14mo ago
i changed the structure a bit and used grid-template-columns autofit for the responsiveness https://codepen.io/MarkBoots/pen/jOdxoQN @GrapDes Should I keep this pen active or can I remove it again like last time? If you post a question, it would be nice if you also respond to answers. We're putting our free time and effort in helping others, but it feels a bit of a waste if you keep quiet for several days.
MarkBoots
MarkBoots•14mo ago
removed the pen. here a backup incase you still need it
No description

backup.html

Did you find this page helpful?