CSS Grid footer columns layout wrapping
Hey! I’m working on a site for a client and I hit a massive roadblock with the footer. See attached screenshot of Figma design. On smaller screens it’s straight forward, the columns just stack. However, the problems start with larger screens.
Here’s my attempt on Codepen: https://codepen.io/Framboos/pen/wvLJewP
The first and last columns are static and will stay the same (first has a logo and social media icons, last has newsletter signup form). However, all the columns in between come from a CMS, so there’s no telling how many will there be and how many items will they contain, so the code has to be as future-proof as possible....
Need help in tricky css design
As part of my practice, I am currently working on a CSS challenge that involves a particularly tricky design. I have attached an image of the design I am trying to achieve. Despite my best efforts, I have been unable to replicate it successfully.
I would be immensely grateful if any one could provide some guidance on how to achieve this specific design. Your expert advice would be invaluable in helping me overcome this challenge....
vertically centering the hamburger and logo in the same line
https://codepen.io/saidmammadov11/pen/ZEdLmjY especially on smaller screen sizes its not perfectly aligned as u can see from the picture im not satisfied by it i would really appriciate it if anyone could give a hand!
Event listeners not attaching after an operation on the page
Hello, for some reason when I use the search field or add a cyclist, the element gets added to the page but the show details and delete button doesnt work. They work on reload however. It's an even listener issue but I tried all sorts of things but doesnt seem to be working.
This are the buttons:
``` <button sec:authorize="hasAnyRole('ADMIN','USER')" th:text="#{cyclist.text13}" class="btn btn-primary show-details-btn"
th:data-target="'#cyclistDetailsModal_' + ${cyclist.id}" data-toggle="modal"><i class="bi bi-eye-fill"></i> Show Details
</button>...
