I am creating a button group with label like this: The HTML code I am now writing: <figure class="toggler-widget"> <figcaption class="toggler-label">Sort By:</figcaption> <ul class="button-togglers"> <li class="choice-selected"> <button type="button" title="Sort by title" aria-label="Sort by title" aria-pressed="true"></button> </li> <li> <button type="button" title="Sort…
I want to have this layout: My try: .container{ padding: 10 px; gap: 10 px; flex-direction: row; } figcaption{ font-size: smaller; text-align: end; } <blockquote>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque, iste incidunt fuga aliquam veniam mollitia enim…
Hopefully the image i've marked up describes the issue easily enough. The red bordered figure conataining the image is not centered, despite the paragraph above centers fine. Both elements are in the same flexbox container. Seemingly the figure doesn't obey…
I am trying to understand how to count and display current and total number of figures on my page. My html <div class="is-vertical"> <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure> <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure> <figure><img src="src.jpg"><figcaption class="wp-element-caption">Towers Day<br>NYC</figcaption></figure> </div> My js attempt of…