How to adjust the width of content (all and specific) on a normal page?

support
1

Hello everyone, I have been trying to figure out how to change the way text and elements in general are shown on a page.
I am very new to Hugo and websites in general.

What I essentially want is that certain elements stretch all the way to the right on desktop like this preview of the article “How I started my very first website” Like this. It has even margins on the left and right.

I have this embedded map from Datawrapper that I want to be stretched like the article preview in the previous link.

How do I achieve this for the map and even for normal text ?

I am using the blowfish theme.

Help is much appreciated!

2

That’s a CSS question, not a Hugo one.

That’s terrible div soup. If I set width: 100% on the element
<div class="min-w-0 min-h-0 max-w-fit">, the map stretches further to the right, filling about 2/3 of the viewport. So, that might get you closer. But I have no idea where you’d set that in your CSS – you didn’t post a link to your repository, so no one can see your code.

If you don’t know zilch about HTML and CSS, it’s probably not a good idea to start with blowfish and a bunch of JavaScript (> 300Kb). With something like that, you’ll run into issues left and right because something or something else doesn’t work the way you want them to. And then you’ll have to dig into the div soup, just to set the width of an element. Things are not simplified by JavaScript code that modifies style attributes.

I suggest getting a basic understanding of HTML and CSS first and then starting out simple, preferably without a CSS framework. Perhaps Leaflet is a better choice as a mapping framework than Datawrapper (at least, it creates cleaner HTML and is modularized).

2 Likes
3

Thanks for your response! Since I used Hugo to create the website, I was assuming that this would be an appropriate place to ask this question.
It’s not that I no nothing about CSS and HTML but I haven’t build anything from scratch. Otherwise I wouldn’t have been able to build this website in a few days :sweat_smile:. I’m getting the hang of it but there are a few things that I find difficult to wrap my head around.

Sorry, this is my repo:

I also thought it would be something as simple as setting the font in the custom.css file…

4

keep in mind that copying content like is copyrighted

5

This map is from Datawrapper which is free to use.

1000101911
10001019111024×2284 223 KB

6

maybe my language problem. thout you copied it from another site. if you created it yourself all :ok_hand:

7

I found out that adding

.prose {
max-width: 100%;
}
.max-w-prose {
max-width: 100%;
}

to the custom.css extends the width of text.