Sela Theme – Add text overlay box to Mobile version

cashewskale · Member · Aug 16, 2018 at 3:54 pm
Copy link

Add topic to favorites
Hi there,

I’m working on customizing the front page of my blog and would like for the white text overlay box that shows in the desktop site version, to also show in the mobile version.

Currently the responsive layout removes all overlay in the mobile version. I understand if it can’t be a full overlay as the image size shrinks, but is it possible to have a small amount of white box overlay so it makes the site more cohesive to a mobile viewer?

The website is here: https://cashewsandkale.com/

The blog I need help with is: (visible only to logged in users)
dkmyta · Member · Aug 16, 2018 at 10:30 pm
Copy link
Hey there,

So just to clarify – I am seeing that the desktop version look like this on the front page: http://prntscr.com/kjjafn and the mobile version looks like this: http://prntscr.com/kjjas8.

So you would like the mobile version to look more similar to the desktop version with the white textbox/text inside or slightly overlapping the main image? Are you wanting this only for the front page or for all images and posts through out the site.

Let me know if I am accurate or if I have misunderstood in any way.

Cheers
cashewskale · Member · Aug 17, 2018 at 4:44 pm
Copy link
Hi there,

Yes, you’re understanding correctly. I would like the mobile version to look more similar to the desktop version with a slightly overlapping white text box with text inside. I don’t think it would would to have a fully overlapped white box on the image for mobile as the images scale down so much.

If this would be possible to amend for both the front static page of the website, as well as the main posts/blog page ( https://cashewsandkale.com/recipes/ ) that would be ideal.

Thank you,
Beige
dkmyta · Member · Aug 17, 2018 at 11:23 pm
Copy link
Hey again!

I’ve been working on an @media query for your homepage to achieve the styling you are looking for in mobile view but with the tools I have to work with I can only realistically see it in pieces and not the final product.

If I am correct positioning the header image as absolute will allow the text box to move into the image area and styling the text box a little will make it more consistent to the desktop version. I have set the media query to begin at a screen width of 768px because that is when the default styling changes from desktop to mobile.

Try it out in the various views and screen widths, no guarantees as I could not test it out myself on multiple screen widths. If it works I may have a solution for your blog pages as well.
```
@media only screen and (max-width: 768px) {

   .home .hero-content>img { 
       position: absolute;
   }

   .front-page-content-area .with-featured-image {
        margin: 50px 50px 0px 50px; 
       background-color: white;
   }

}
```
Fingers crossed!

Cheers
cashewskale · Member · Aug 20, 2018 at 3:14 pm
Copy link
Hello!

I pasted the code into my Custom CSS but when I checked on mobile it still looks the same.

Perhaps it isn’t possible with this theme?

Thanks!
dkmyta · Member · Aug 20, 2018 at 5:18 pm
Copy link
Hey again,

Hmm something seems a little odd, I see that it is recognizing the media query and the selectors within but for some reason it does not seem to be picking up the property:value; pairs within.

Is there no changes at all when you paste this in and adjust the screen to mobile view? Is there any error messages or red exclamation point icons appearing in the Custom CSS section?

At the very least there should be some general structural changes visible. This is what I see when I paste the following in manually one by one: http://prntscr.com/kkvzex

Let me know,

Cheers
cashewskale · Member · Aug 20, 2018 at 6:17 pm
Copy link
Oh my goodness, I see what happened. So sorry!

It looks like the copy of the initial code didn’t work properly on my end. It only took the first half of the code, not the second half with the margins.

I’ve retried and now it works beautifully for the front page. But, it still doesn’t work for the Posts/Blog page.
dkmyta · Member · Aug 20, 2018 at 6:21 pm
Copy link
Awesome! Yes, this code is specific to the homepage. The posts pages will require another different media query and due to their current set up being quite a bit different then the home page it may be a little more complicated.

I am still looking into a solution and will get back to you shortly if I am able to come with something workable.

Cheers
dkmyta · Member · Aug 20, 2018 at 9:47 pm
Copy link
Hey!

Okay so I think I was able to get something to work for you that looks more in line with the desktop version for the blog pages as well. Now keep in mind again I was not able to test this live but rather just piece by piece so be sure to review all other pages once you enter this in to make sure it hasn’t made any unwanted changes.

I have set the media query for 1180px this time as that is when this particular page switches over to the mobile view. Here we go:
```
@media only screen and (max-width: 1180px) {
    
   .site-content {
       overflow: hidden;
   }

   .post-thumbnail+.entry-header { 
       margin: -5rem -2em 1em 100px;
       padding: .75em .75em 0 1.125em;
       min-height: 40px;
       background-color: white;
   }

   .entry-body {
        margin-top: 1.5em; 
       padding: 0 0 0 100px;
   }

}
```
The result should look like this: http://prntscr.com/kkyyuq.

Let me know if it turns out or if there are any unforeseen changes that we may need to adjust.

Cheers
cashewskale · Member · Aug 21, 2018 at 3:15 pm
Copy link
Hi there!

Thank you for putting so much work into this! I’ve added the code in and it works!

Thank you so much!
dkmyta · Member · Aug 21, 2018 at 6:04 pm
Copy link
Awesome, no problem at all! Glad I was able to help.

No items found.