Sela Theme – Overlay box on desktop and mobile

Hi @tslofphoenix,

But more importantly, the text of the overlay box that is positioned fine on my desktop appears way down the screen on my mobile phone, with a lot of white space, far from the featured image. Is there anything that can be done to accomplish both of these?

I’d recommend applying different CSS for different screen sizes.For example, if you want to only apply that CSS to the desktop-sized site, you could use this:

@media screen and (min-width: 1180px) {
  .hero-container-inner .hentry {
    width: 45%;
    padding-top: .5px;
    padding-bottom: .5px;
  }
}

If you examine your style.css file you’ll find other sizes (600px for example) that you can use as other break points.

And then you’ll just position for each one, or even hide the overlay on mobile.

I hope this helps!

Thank you for your response, though I’m not clear how your response answers my queries.

(1) I see no change on a mobile phone, with the content still being considerably lower than the featured image.

(2) The overlay box on a desktop is still in the middle of the screen vertically, when I’d prefer it a wee bit lower, more towards the hiker’s knees. Of course, if I make this change, it might lower the content even further on a mobile phone.

Perhaps, it’s not possible to accomplish my goals.

Hi, specifically I was referring to this:

But more importantly, the text of the overlay box that is positioned fine on my desktop appears way down the screen on my mobile phone

I understood this to mean the CSS you have applied causes the content to fall too low on mobile. I can see that when viewing the site.

You would want to remove those changes.

Then, use CSS that is specific to a larger screen size instead, like the example above. That way, you can lower the box as much as you like without affecting a small screen, because the changes only apply if the screen is larger than the width specified.

If needed, you can create another rule for mobile-sized phones if you’d like, using the same syntax.

Oh, and to be clear, you can still adjust the margins in the CSS example I gave. The key is that you will want to only apply it to larger screens, using the @media syntax.

I am not familiar with media queries, so all of this might as well be written in Greek.

And I don’t know that the CSS I have is making the content fall below the featured image, because all of that CSS was supplied years ago by your support or I found it on forums. That’s why I was asking you if my CSS is interfering with what we’re trying to accomplish.

I have used the Sela theme on other websites and not experienced this problem, so I am at a loss.

Hi, please remove what you have so far:

.hero-container-inner .hentry {
width: 45%;
padding-top: .5px;
padding-bottom: .5px;
}

Replace it with this:

@media screen and (min-width: 1180px) {
  .hero-container-inner .hentry {
    width: 45%;
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

Then if you need to adjust the numbers, you can.

And, as a reminder, extensive CSS customizations are outside the scope of support we can offer for this free theme, though we can provide tips like the one above. If you’d like more help, we’d recommend hiring a designer who can make short work of this for you. Good luck!

• This reply was modified 4 years ago by supernovia.

Thank you for the attempts to help me. I understand the limitations.

I’m going to close this ticket because I do feel that some other CSS is interfering with these resolutions attempts. I will have to go through and test each entry.