Lodestar Panels Customized css

• 

  yogahippiejane · Member · Feb 19, 2020 at 11:39 am

  • Copy link
  • Add topic to favorites

  Hey folks! I’m really new to CSS and I tried my best so far but there’s one thing I can’t wrap my mind around.
  The side I need help with is https://namastayinlove.yoga

  In the Lodestar Theme you have these panels and what I’d like to change is the following. Since I don’t know how to upload an image here, I try to describe it. You go to the starting page, scroll down and then there’s the first panel with a picture and the “text page”. I’d like to change the height of this text page, so that the top of the text page aligns with the picture above in a straight line, and doesn’t look like a box popping into the picture. Is this possible with CSS? I’ve looked into HTML and CSS and what the browser shows me for that part of the panel is this code

  .one-column.has-post-thumbnail .panel-content .wrap {
      margin-top: -6.5em;

  In front of “margin-top”, there’s a little check-box. If I uncheck it, the site changes how I would like it. But if I copy this into the CSS customizer, the check-box disappears and I have no idea how to change the variables to get what I need.

  Would be awesome if someone could help me with this, thanks in advance! :)

  The blog I need help with is: (visible only to logged in users)

• 

  staff-blorbo · Staff · Feb 19, 2020 at 10:00 pm

  • Copy link

  Assuming you mean the checkbox in your browser’s inspector, that disables the line.

  So, if removing the check solves the issue, try this in Custom CSS:

  .one-column.has-post-thumbnail .panel-content .wrap {
      margin-top: none;
  }

• 

  yogahippiejane · Member · Feb 20, 2020 at 7:43 pm

  • Copy link

  Thanks for the quick answer and help! I just tried it, but unfortunately, it doesn’t solve the problem. The outlines of the box stay, reaching into the picture. Would there be any other option in CSS?

• 

  staff-zinnia · Staff · Feb 20, 2020 at 11:19 pm

  • Copy link

  Try this. It worked on my test.

  @media screen and (min-width: 60em)
  .one-column.has-post-thumbnail .panel-content .wrap {
      margin-top: 0em;
  }