Mobile Issues for Hello Niche

QuestionsCategory: QuestionsMobile Issues for Hello Niche
Jen Shannon asked 3 months ago

Hi there,
I’ve had quite the headache with mobile issues with Hello Niche and it’s blocks. I’ve been able to resolve some of them on my own, but there are some that I just can’t seem to figure out where the source is pulling from. See below.

  1. On a blog post, the header image is set to the correct image, but the mobile image is still pulling the block’s standard background image. See screen shots attached. Here’s desktop and back end settings. Here’s mobile and back end settings. Here’s the link to the blog post. https://jenshannon.com/cigar-rest-whisky-barrel-stave-flight/
  2. The kadence block I used for the actual post and text overlap in a weird way instead of stacking on mobile so I can’t read the first part of the text. Here’s the screen shot for desktop. Here’s the screen shot for mobile.

I appreciate any help you can provide. The issue seems to only be with this post, however the issue with mobile pulling a different header image on mobile is not isolated to the blog post. It also happened with my home page but I just ended upsetting a special mobile background to the same image that was on the desktop.

1 Answers
Jennifer Staff answered 3 months ago

With the early version of the theme you needed to change the background for mobile when using the fixed image section. So if you click on the background, then click over to tablet view, you can modify the image that is shown there.

Two ways to fix the mobile view for that block. 1st way, click on the entire block and then over to mobile view and adjust the background %, so shrink it so it shows less black.

The other way is to click on the second block where the wording is, click on mobile view, then adjust the padding so there is more padding on top and it pushes the wording down. This one is probably going to be easier to do than adjusting the % of the top square background.

Jen Shannon replied 3 months ago

Is there not a way to have it pull for tablet, desktop, and mobile from the same spot rather than having to update each of them fore very block?

Jennifer Staff replied 3 months ago

This only needs to be for the blocks that have a background image that scrolls. Another option is to turn that off and not load a secondary image in. So click the background section, click tablet, uncheck the box for different background. Then add this code to your additional CSS spot. It will force that fixed background image to scroll so it is not blurry on tablets and phones.

@media only screen and (min-width: 276px) and (max-width: 1380px) {
.kt-row-has-bg {
background-attachment: scroll !important;
}
}