Expand padding around rows

Hello!

On the front page of my site www.skarptläge.se

I have a white row with text, followed by a black bar with text, followed by another white bar with text.

I would like to expand these bars vertically, so that you can’t see the following text while reading the one you are at. However I wish to do this on desktop only, as there’s no need for it on mobile, where it looks great from the beginning.

Simply going to the sitebuilder and increasing the padding changes this om mobile too, so I had to resort to some short lines of custom css

Under the div with id pl-w59861e68b18aa I found all the divs I needed to change the padding on, they had the same id as the titles: om (about), varfor(why) and historik(history).

So I tried the simple code:

@media only screen and (min-width: 1024px) {

  #varfor {
  padding: 200px 382.5px 450px;
  }

  #om {
  padding: 200px 382.5px 450px;
  }

  #historik {
  padding: 200px 382.5px 450px;
  }
  
}

This did unfortunately not do any difference. Any thoughts on how to fix this

It would be really great if you theme in the future had an option to make these bars automatically as big as the screen. Because it looks great on mobile, and seems kind of lacking when it looks differently on desktop. Cheers!

Hello OptiGE,

I have just checked your website and it looks like you have already resolved this issue, is that correct?

Kind Regards, Roman.

Yes I have! I thought this post didn’t go live, the forum was slightly weird last night.

The problem was that the CSS didn’t override the style attribute in the div. This was solved by adding !important like so

@media only screen and (min-width: 1024px) {

  #varfor {
  padding: 200px 382.5px 450px !important;
  }

  #om {
  padding: 200px 382.5px 450px !important;
  }

  #historik {
  padding: 200px 382.5px 450px !important;
  }
  
}