Kevin Powell - Community•13mo ago

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

3 Replies

GrapDesOP•13mo ago

https://codesandbox.io/p/sandbox/busy-glitter-24jhdr?file=%2Fassets%2Fcss%2Fstyle.css%3A128%2C17

MarkBoots•13mo 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•13mo ago

removed the pen. here a backup incase you still need it

backup.html

Gaming

Programming

the right way to do responsive