Streaming live at 10am (PST)

Heading moves to the left?


#1

Hi, I’m creating a step by step page on my site and the numer heading moves to the left, I can’t figure out why.

Here is a screenshot of what I’m working on:

Here is a screenshot after deleting the first number badge:

Here is a link to the page:
Site Link

Here is my read only link:
Read only link (It’s not the first page but the page named “Hur det går till”)

Anyone that can see what the issue is?


#2

I don’t know, but I propose a more solid and less complex structure for your numbered elements, using Flexbox.

Here is how I did it:


#3

Thank you @Vincent ! Clearly the better way to do it. I’m still having to remind myself that flex box is often the batter way to do these types of things.


#4

Well not only. I was lazy and didn’t see why I could not use Flex. But you could have made your three elements exactly the same size and stack them up using position:absolute. It couald also be a unique element, the text with padding, border and outer glow.


#5

This topic was automatically closed after 60 days. New replies are no longer allowed.