No space between website elements in Safari

[kundewolf]

Hi! I am new to programming websites and I've used your great template to give it a try. When I look at the results in Safari, the items are all squished together, with no space between sections or elements, but in Firefox and Chrome everything has a bit of space. If I add extra line breaks it looks good in Safari, but is way too spread out in the other browsers. Any idea how to fix this?

[ndoherty-xyz]

Hey @kundewolf!

I didn't see this same issue when I just tested in Safari.

If you're still having this issue can you attach a screenshot of your website in Safari and anything you modified in the code? That way I'll have a better idea of what's going on.

[ndoherty-xyz]

@kundewolf

I checked out the git repo that you generated with this one. If the issue your having is with the links in the header, then it looks like the problem is that you've put all the header content inside the div with the class .header-text. This div is only meant to hold the text in the header and has no spacing between text elements.

If you add your links into the div with the id #portfolio-header-text-container after the div with .header-text, it will space them out like in the template. Looks like this when I tried it on your site:

Here's the code change I made for that section:

<div id="portfolio-header-text-container">
	<div class="header-text">
		<span class="main-title">Einmal haben wir im Fluss ein graues Rohr gesehen, aber es war ein riesiger Fisch, probably ein Wels. Wollten das Plastik im Wasser filmen, also hatten wir keinen Fisch erwartet, bah. Als wir später nach den “Homes for Ideonella” schauten, im Auwald, und sie nicht mehr da waren, fragten wir uns ob es die Förster*innen oder Kinder waren, die den natürlichen Lauf der Evolution unterbrochen hatten. Aber in der Alten Münze, lol, ist das Epoxidharz und Mikroplastik für immer drin. Die Waschkapseln haben wir nach der Performance bei dm zurückgegeben. Entspannt.</span>
		<div class="body-text"> Installation, Performance, Collective</div>
	</div>
	<a class="button" href="#my-work-section">
		<span class="button-text-title">Projects</span>
		<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
	</a>
	<a class="button" href="#exhibition-section">
		<span class="button-text-title">Exhibitions</span>
		<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
	</a>
	<a class="button" href="#about-section">
		<span class="button-text-title">About</span>
		<image src="./assets/icons/arrow-right.svg" class="right-arrow-icon"/>
	</a>
</div>

Not sure why it worked in some browsers and not others though.

Hope this helps! Let me know if there's anything else you run into.

[kundewolf]

Thank you for your reply! This does explain to me, in principle, how to space out the elements, which is great, however, the issue I am seeing in Safari is this:

All elements are squished together. In Firefox it looks how I would like it to look:

Might be specific to my browser settings.