Need custom CSS for vertical alignment advanced list icons

Closed
REHub - Price Comparison, Affiliate Marketing, Multi Vendor Store, Community Theme REHub - Price Comparison, Affiliate Marketing, Multi Vendor Store, Community Theme October 31, 2022
Login to reply
Xando Koster
1 month ago

Well I found my own solution with CSS. Thanks tho

Xando Koster
1 month ago
So, you're saying I should vertically align the icon to the top and push it down with icon spacing? How do I ensure it gets centered ?
Igor Sunz Support Agent
1 month ago
You can set icon spacing in options of list block

Пн, 7 нояб. 2022 г. в 00:18, Sizam Support Help Desk <
sizamtheme+AWdkVEojgvbq4MzNLxgK@mail.support-hub.io>:
Xando Koster
1 month ago

If I set it to top align it looks even worse. It's also not what I am requesting.

Igor Sunz Support Agent
1 month ago

ok, but top vertical align is default state, so, you need to set top align

Xando Koster
1 month ago

It seems like you're not understanding my issue.

Again, I am using the Advanced List Block editor + I have used the vertical align option of Greenshift. However, the vertical align option has a limitation. Namely, when I set it to "center" it wil center perfectly when the sentence is 1 line long. Yet, when the screen gets smaller, AND the text gets broken up into 2 lines of text, the icon is displayed inbetween the two sentences. I DON'T want that. I want it to align in the center of the FIRST sentence (so the upper line of text).

Please take a look at the image attached. I want the icon to go where the red arrow has been placed.

Igor Sunz Support Agent
1 month ago
Advanced list block has vertical align option
Xando Koster
1 month ago

Yes, I am using that one. But I want the bulletpoint to be aligned in the center of the first sentence. The current centering makes it look unreadable whenever there are 2 or more lines of text for 1 bulletpoint (the bulletpoint item is broken up on smaller screens when the text gets too long). Currently, It takes the center of all sentences combined for that bulletpoint item instead of centering for the top sentence.

Igor Sunz Support Agent
1 month ago

you can use Advanced List block from Greenshift plugin. it has align option

Xando Koster
1 month ago

Hi there,

I am trying to make the advanced list SVG icons responsive by trying to center them to the top sentence of the list item whenever the text gets broken up by the screen width. Currently, the SVG icons are vertically aligned in the center (as set in the settings). However, I would like it to vertically align in the center only for the top sentence (just as normal list ::markers operate). Please see the first image of how it is displaying now, and the second image for how I want it to align on smaller screens (e.g. 640px<).

Looking forward to your response.

Additional Info

Link on page with issue: https://dehetbeste.nl/laptops/