CODEWITHSUNDEEP
htmlcsshugoblogdown
Ruslan Klymentiev
Ruslan Klymentiev

Reputation: 23

Is there a way to remove margins/padings for specific pages in Hugo Academic?

I have an iframe object in the index.md page of Hugo Academic website that I want to be at the full width of the page without margins (screenshot attached). I added this code to .md file:

<style>
iframe {
  margin-left: 0;
  padding-left: 0;
}
</style>

However 0 padding is already where the iframe is at the moment, so I can move it to the right, but not to the left.

Can it be adjusted for the specific objects/pages?

iframe looks like this:

<iframe src="https://ruslankl.shinyapps.io/roc_simulation/" width=1000 height=1000" frameborder="0"></iframe>

Screenshot

Upvotes: 2

Views: 940

Answers (1)

runar
runar

Reputation: 2857

I did some research and found this article with several better solutions. My original solution worked, but it made the iframe float on top of the rest of the content, and we do not want that.

So, thanks to the article mentioned above, I came up with the following that works on your website:

iframe {
  height: 1000px; /* Set this to the height you want the iframe to have. */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

Note the comment after the height. You need to set a fixed height on the iframe to prevent the iframe's content from being cut off. I first set it to 650px which according to my calculations is the height of the website it loads, but then I got a scrollbar, and I assume you would prefer no scrolling.

To quote the article on how it actually works:

The idea here is: push the container to the exact middle of the browser window with left: 50%;, then pull it back to the left edge with negative -50vw margin.

And as a final note, the vw unit is a viewport unit, more specifically the width of the viewport, where 100vw is 100% of the viewport width.

Original answer below:

I have not tested this with the Academic theme, but on my own site (built on Hugo, but that should not matter) this makes the iframe the full width of the page, regardless of any margins or paddings on the content:

iframe {
    left: 0;
    position: absolute;
    width: 100%;
}

With the use of the position: absolute, the iframe will be placed as close to the left of the window as possible (thanks to left: 0). Then we use width: 100% to make it fill the page.

You should also consider adding a class or an id to the iframe, so you can use that for styling instead of the <iframe> element, just in case you happen to have more than one iframe on the same page.

Upvotes: 2

Related Questions