Div alignment

[prismaticpink]

Hi! I don't know if this is the correct title, but I'll try to explain my problem.
This is my website: https://prismatic.pink/
I am using divs as a background to h2 titles.

This is how it looks like on my computer. I want it to look like this on other screens.

spoiler!

This is how it looks like on my phone (and it looks kinda similar on my iPad and on my husband's computer as well).

spoiler!

This is my CSS so far:

Code: Select all

.widget-title {
	background-image: url('http://prismatic.pink/wp-content/uploads/2024/11/bg-rainbow.gif');
	border-radius: 7px;
	border: 1px solid #736026;
	margin: 1.5em 0em 1.5em 0em;
	height: 1.8em;
	text-align: center;
}

.widget-title h2 {
	color: white;
	text-shadow: 1px 0px #736026, -1px 0px #736026, 0px 1px #736026, 0px -1px #736026;
	margin: -0.5em 0em 0em 0em;
}

I know that using a negative value in "margin" isn't the best idea, but it was totally misplaced without it.
Sorry if it's a stupid question, I'm a beginner

[pom]

hmm, i use px on my site instead of em (old habits die hard) i know its not really the most "responsive" anymore but it makes all my headers look the same on every device. maybe try px instead. using em might be what's making the sizes look different because it makes the size relative to the size of the default font and a phones default font is a different size than a computer browser

[jessica]

there are a few things you could try, but i think the easiest and cleanest solution would be to just have one class applied directly to the h2 element, and add in line-height to ensure the text stays vertically aligned within the container. i did up a little example for you here: codepen example

or you can see the code here:

spoiler!

CSS:

.widget-title {
color: white;
height: 1.8em;
line-height: 1.8em;
text-align: center;
text-shadow: 1px 0px #736026, -1px 0px #736026, 0px 1px #736026, 0px -1px #736026;
background-image: url('http://prismatic.pink/wp-content/upload ... ainbow.gif');
background-size: 100% 100%;
border-radius: 7px;
border: 1px solid #736026;
margin: 1.5em 0em;
}

HTML:

<h2 class="widget-title">About Me</h2>

in this case, as long as you have the line-height set equal to the container height (1.8em in this case) it will stay aligned vertically regardless of the resolution, and it simplifies your code a bit

[sanslover69]

first of all, your website is sooo cute omg! you're doing great so far. pom is absolutely right about em units changing across devices. that's the root issue here. i like jessica's solution with line-height as well-- that's very quick and easy to implement! if you still want to use a container, you could make .widget-title a flex box with justify-content and align-items set to center. make sure to remove the margins from h2!

[prismaticpink]

Guys, thank you so much for all the help! I think the problem is actually my computer lol because I could fix it using both suggestions (using h2 instead of divs or fixing the divs), and now it looks neat on my phone, iPad, husband's computer, etc. But now it's misplaced on my laptop.

Using h2 instead of divs:

spoiler!

Using divs but fixing them:

spoiler!

And both ways look like this on other devices:

spoiler!

hmm, i use px on my site instead of em (old habits die hard) i know its not really the most "responsive" anymore but it makes all my headers look the same on every device. maybe try px instead. using em might be what's making the sizes look different because it makes the size relative to the size of the default font and a phones default font is a different size than a computer browser

I must say I absolutely ADORE your website! You're such an inspiration to me

I am also more used to px instead of em, but I wanted to challenge myself and create a ~somewhat responsive~ website this time... I used to make some layouts back in the 2000s but they were all FrontPage-ish, so I think it doesn't really count hehe
I want to make a separate page in the future, something more pixel-focused, as soon as I get the rust off :p

Now someone told me the problem was actually with the line-height in body set to 1.5. I deleted it now and let's see how it goes.