Canard Mobile and Feature Image problems
-
Hi, I’m having a couple problems with Canard theme.
My first problem is that on the mobile version, all the site formatting disappears and it shows like a basic worpress.com blog. When viewed in desktop mode on mobile, or viewing the mobile preview on desktop it looks fine so I didn’t realize this for weeks.
My second problem is the way featured images get cropped. I’d like to set it so they are center cropped wherever they show up on the site. In the featured section on the front page it crops left for desktop, on mobile it crops right, elsewhere it’s center cropped. (I’d also like to remove the dimmer from the featured section on the front page so it shows the images at full brightness, but that’s less important.)
Anyone who can help, thank you in advance!
The blog I need help with is: (visible only to logged in users)
-
Hi, I posted this in the themes forum but maybe it makes more sense to post it here.
I’m having problems with the way featured images get cropped in canard theme. I’d like to set it so they are center cropped wherever they show up on the site. In the featured section on the front page it crops left for desktop, on mobile it crops right, elsewhere it’s center cropped.
I’d also like to remove the dimmer from the featured section on the front page so it shows the images at full brightness, but that’s less important.
Anyone who can help, thank you in advance!
-
Hey there,
My first problem is that on the mobile version, all the site formatting disappears and it shows like a basic worpress.com blog. When viewed in desktop mode on mobile, or viewing the mobile preview on desktop it looks fine so I didn’t realize this for weeks.
That sounds like AMP applied to individual posts. It’s meant to make the pages load faster so you get better rankings and views. We have more info, including how to deactivate that feature, here: https://wordpress.com/support/amp-accelerated-mobile-pages/
If I visit the site from my phone by typing in the address, though, it shows the styled site. Have a look and see if you see the same thing.
My second problem is the way featured images get cropped.
Hmm, you could get some CSS sorted for that, but I’m looking at your images and that may not always be ideal. Have you considered using a plugin that lets you choose how each featured image is cropped? I haven’t tried this, but you might give it a shot:
It looks like that lets you specify the crop area, which could be what you need.
Also, your plan entitles you to direct support, so if you’d like, you can reach out here:
https://wordpress.com/help/contact -
Oh, regarding the dimmer, just set the opacity to 1 (100%) using your CSS. You can find any style on your site like this:
https://wordpress.com/support/custom-design/how-to-find-your-themes-css/Hoping this helps!
.featured-content .post-thumbnail { opacity: 1; background-position: center; } -
-
Thanks so much, the CSS worked perfectly and the AMP changes helped a lot. (Still experimenting with the cropping plugin.)
I’m having a new problem with featured images on individual posts not showing on mobile. They don’t show in desktop or mobile mode on my device.
Thanks!
-
Hi there,
Do you mean, for example, when viewing https://blaqlyte.com/2022/06/06/aphisit-sidsunthia-thai-contemporary-art/?
It looks like the entire header section of single posts in the mobile view is being hidden by some inline CSS. I’m not sure where that CSS is coming from – it’s not something you’ve added in the Customizer. But you should be able to override it by adding this code:
.single .hentry.has-post-thumbnail .entry-header { display: initial; } -
Yes, that worked!
However, now the headline is larger than the image and shows below it. How can I shrink the header font size and make it appear before the image (along with the categories)?
Thanks :)
M
-
Also, now it seems that the images for the featured posts on the front page when viewed on mobile no longer load.
The page automatically redirects to blaqlyte.com/?amp=1 if that means anything.
-
Hello there,
However, now the headline is larger than the image and shows below it. How can I shrink the header font size and make it appear before the image (along with the categories)?
I can’t see that the text is larger than the image there. Are you able to provide a screenshot of what you’re seeing please? This can be shared with us via: https://snipboard.io/
With regards to moving the title, this would require custom development work to achieve and you would need to seek a developer to carry that out.
Also, now it seems that the images for the featured posts on the front page when viewed on mobile no longer load.
This is because of the AMP settings located via Dashboard > AMP > Settings.
In the settings, if you scroll through to Template > I’ve disabled AMP from running on pages and posts, so you should see the theme template run on a mobile.
I hope this is this useful so far.
-
Thanks, the AMP settings fixed the image problem!
Here is the screenshot of the large headline text:
M
-
Hi @stylinoem,
I’m glad to hear that changing the AMP mode helped resolve your first issue. If needed, you can also deactivate the plugin entirely.
With regards to the featured image, this might be something that you can change with custom CSS code, however you might want to consider switching to a block-based theme that allow you to create a custom template using a cover block for your featured images. The benefit of that is it allows you to set your own focal point.
Block-based themes use full site editing (FSE), which you can learn about here: https://wordpress.com/support/full-site-editing/
I hope that helps and please reach out again if you have any further questions.
- The topic ‘Canard Mobile and Feature Image problems’ is closed to new replies.
WordPress.com Forums 