Blockstar theme does not display properly on phone
-
BlockStar theme does not display properly on the phone: The backdrop photos don’t fully scale down on the phone (Android or iPhone). However, it looks great on a notebook.
I have modified a few settings in the theme with no luck.
Anything I could try?
Thank!The blog I need help with is: (visible only to logged in users)
-
Hi there, you can pretty much see this on the theme’s preview at https://wordpress.com/theme/blockstar Click on the Preview button and then switch to the “Phone” view from the drop down menu on the left. You’ll notice that most of the images “disappear” from view when on mobile.
Unfortunately, I don’t have any solution for you, but I’ve flagged your thread for staff help.
(There is a Classic theme Lodestar that looks to be Blockstar’s inspiration and there the images do scale to fit mobile (again, via the Preview). 🤷♂️)
-
Thank you for mentioning Lodestar.
Indeed, it looks good with the Phone display in the simulator.I am going to “play” with it, but if the Blockstar team could fix the theme, I would not have to move my pages.
-
Hi there!
Thanks for bringing it up! The Blockstar theme uses the Cover block, which works differently from regular Image blocks. When you use an Image block, the image is resized in a responsive mode so that the whole image can be viewed on any device.
By design, the Cover block responds differently, and you won’t be able to see the whole image when the site is in responsive mode. In other words, if you use the Cover block and then resize the browser window (or visit the page on a mobile device), the image will be cut off.
That’s to say, the behavior you see in the Blockstar theme isn’t a bug. It’s how the Cover blocks work. You can create a test page on any block theme, insert the Cover block, and check how it works.
The Lodestar theme behaves differently because it doesn’t use the Cover blocks and is designed to take featured images from different pages (called panels, as you can see in the theme setup guide).
The Cover block isn’t set to show the full image, as you would be adding custom content on top of it (like a header text), so the visitors’ focus would be on the content, not the image in the background.
If you want to display the full image on all devices, you can replace the Cover block with an Image block (You can do so in the Blockstar theme, too, since block themes let you customize them the way you want). However, you won’t be able to add other content across the Image block in the same way as the Cover block.
Hope that clarifies things!
-
@aisajib I’m a bit confused here.
The Blockstar theme uses the Cover block
I looked again at the support guide for images, specifically https://wordpress.com/support/images/#display-a-banner-image which refers to the Cover block. I resized my PC browser to emulate a mobile view as well as viewing that page on my Android phone and the images in the cover block example also resized accordingly so that the entire image was viewable.
However, this is not happening on the OP’s website.
-
I think that @berkshiresommelier changed the top image since posting (and I think that was the “problematic” image) as it now does resize in mobile view.
-
Hello, and sorry, Yes, I was just tinkering with the top image on my website.
Following your previous response, I started to play with the settings and here is what I found out:
– If I select the “Fixed Background On” – The photo does not scale but the parallax works fine on the phone.
– If I select “Fixed Background Off” – The photo scales on the phone but the parallax does not work any more >> I can live with that.Thank you so much for your interest in my problem, for taking the time to look into it and for mentioning the Lodestar theme. I am not planning to switch to Lodestar, but I have now a better understanding of how it works.
I think I can consider this problem solved. :-) -
Hi @2020testjj,
I looked again at the support guide for images, specifically https://wordpress.com/support/images/#display-a-banner-image which refers to the Cover block. I resized my PC browser to emulate a mobile view as well as viewing that page on my Android phone and the images in the cover block example also resized accordingly so that the entire image was viewable.
Do you happen to recall if the “Fixed background” option was on? (An easy way to tell is if the parallax effect is on.) As @berkshiresommelier mentioned above, it would behave differently based on that setting.
Also, if you use two blocks with the same image (one with the Cover block and one with the Image block), I think you’ll find that the Cover block cuts off the image (even if slightly) more than the Image block, which will always show the full image. Of course, even within the Cover block, the Fixed background option produces different results (I probably should have mentioned that as well).
Also, I’m super happy that you’ve found a solution that works for you, @berkshiresommelier! I was going to suggest turning off the fixed background/parallax effect next, but I’m glad to see that you’ve already figured it out already! :D
Having the image resize or scale on the Blockstar theme, ideally with a parallax effect, would be great, although I’m not sure if there are technical limitations that prevent this. I already shared that feedback with our theme developers, though I wouldn’t promise any updates soon. :)
-
Do you happen to recall if the “Fixed background” option was on? (An easy way to tell is if the parallax effect is on.)
The support guide gives both examples (fixed and non-fixed) and in the support guide they both resize responsively, at least in Firefox and Brave.
Generally speaking, it seems odd that a relatively newish, one-page block theme available on WordPress.com wouldn’t be fully responsive from the get-go. :)
-
Hi @2020testjj
The support guide gives both examples (fixed and non-fixed) and in the support guide they both resize responsively, at least in Firefox and Brave.
Are you referring to the example of the Fixed Background in the red rectangle below from this page?
If yes, please note that it is an embedded video. That page does not have an example of a Cover block with fixed background turned on. Instead, a video is embedded to show visitors how the option works.
Generally speaking, it seems odd that a relatively newish, one-page block theme available on WordPress.com wouldn’t be fully responsive from the get-go. :)
I’m not sure what you mean, as the Blockstar theme is fully responsive. This is just how the Cover block works, not specific to the theme in any way. :)
-
-
- The topic ‘Blockstar theme does not display properly on phone’ is closed to new replies.
WordPress.com Forums 