Pique theme – repetition of featured image as backgroung of panel page
-
@thesacredpath Thanks for the advice!!! I returned the mapping because I could not get it to work but on your suggestion I am re-purchasing now.
On my front page there should be 3 blog posts. Each with an image. And you should have to scroll down to see each. On my desktop it works but on my iPhone it does not scroll.
Will map the domain, update the dns from my domain provider and await any further advice.
Many thanks!
-
On my simulator, things scroll just fine. Could you possibly make the site public for a short period so that I can look at it on my iPhone? You can set it to “Discourage search engines from indexing this site” at Settings > Reading and it should not show up on the search engines if you wish to keep it private for now.
-
Mapped and it’s working perfect.
It should be public now also. Perhaps it appeared as down because it was mapping? In any case, I’m stoked! Come to Vancouver and I will take you mountain biking!! Thanks @thesacredpath -
@thesacredpath Thanks for getting back. I’ve made the site public as you suggested.
https://philhirstgardenstest2.wordpress.com/
I’m having problems on Ipad Mini using Safari as browser on ios 9.0.1
Also on Samsung S3 Mini using Chrome browser running on Android 4.2.2 with a screen size of 320 x 534 pixels.I’ve added some screenshots from Ipad Mini to the media library on my site img_0273.png to img_0276.png that illustrate the issue.
Any help appreciated.
-
You know, before I forget, your site looks awesome. You’ve done a great job with it.
I’ve chatted with the theme designer about this, and she can find no reason that this is happening on tablets and phones. Let’s try the following custom CSS and see where this gets us. If this works, let me know and I can pass it onto the designer.
#post-71 .pique-panel-background { background-size: cover; background-repeat: no-repeat; } -
-
Hmmm, you know, one thought I have is to add the !important keyword to the declarations to try and force things. Try the below and let me know. If this works, or if it doesn’t, I’ll get back with the theme designer on it.
#post-71 .pique-panel-background { background-size: cover !important; background-repeat: no-repeat !important; } -
Although my site seems to be working now on some browser, on Google Chrome it seems to get very deformed with big white bars on the side.
Any suggestions?
-
I’ve uploaded to my media library a screenshot I was sent of how my site looks from a friend in the US.
-
@thesacredpath I’ve tried the CSS you suggested just now. Everything seems now OK on mobile with images fitting the size of the panel and none of the weird cropping.
However on ipad mini images are appearing very much magnified. I’ve added some examples to the media library on my blog. IMG_0279 and IMG_0280.
I’ve also noticed that since adding this CSS the images on PC are slightly bigger than previously but not by much.
-
The “cover” background size can do that to background images. What it instructs the browser to do is to make sure the entire div is covered with the image, and in some instances, when the div gets tall, the image has to be enlarged quite a bit to cover that height. There is also “contain” but that would result in certain times when a section of the div would not have image in it.
I don’t know of anything we can do about this.
Thanks for the screenshots too.
I’ll let the theme author know this fixed the basic issue and perhaps it will give her a clue as to what might be going on.
-
@philhirstgardens, add the following to the code I gave you and see if this helps on the image placement and such.
background-position: top center; -
@thesacredpath, just tried that but it didn’t seem to make any difference.
PC and mobile OK. Ipad still has massively enlarged background pics as per screenshots.
-
I’m afraid I’m out of ideas on this. I’m going to file a bug report on this so that the theme designer can see if they can figure out what is causing this issue and make an adjustment
I’ll post back as soon as I hear something on it. Hang in there.
-
I’ve accidentally just stumbled upon the trigger for why the images misalign vertically on my site,( but I don’t know how to resolve it!)
I put in a small piece of CSS to remove the grey overlay that happens on all images, with this code:
.pique-panel-background :before {
background: rgba(0,0,0,0);
}I realised that a side effect is that it throws the images out of alignment, with some of the images showing the bottom of the image, halfway through the panel, as described previously.
However, when I delete : background, the grey overlay comes back, but the images are aligned correctly!
.pique-panel-background {
background: rgba(0,0,0,0);
}Now, if only I can get the image aligned and the grey overlay removed, we’d be onto a winner!
-
@wendychunglondon, I see this in your custom CSS right now
.pique-panel-background::before { background: rgba(0, 0, 0, 0) !important; }Did this take care of the issue?
On image alignment, I’m seeing everything looking pretty good on my iPad Air 2. Can you be a bit more specific on the image alignment issue, perhaps tell me which image and what you are wanting it to look like?
-
Hi, thanks for getting back to me.
Last night I set the site up to show the pictures properly aligned, with the code as per my post. This retained the grey overlay, and the parallax effect stopped.
Another happiness engineer has since helped me tweak it so that the grey overlay is omitted, the parallax effect is working, but the images misalign,(on ipads, which I suspect is where most clients would view the site) which is why there is the revised code.
I have uploaded some images at the following link which show the issue. I have tested this both on an ipad mini and an ipad 2. both of which seem to have this problem. the website displays the images correctly on android phones,( albeit without parallax, but I think that’s the limitation of the theme, so that’s ok)
http://wendychung.london/test/
thank you very much for taking the time to look into this.
-
Ok, let’s give this a try. I’m also seeing this in Safari and Chrome, but not in Firefox.
div.pique-panel-background { background-repeat: no-repeat; background-position: top center; } -
Hi there @thesacredpath,
I was reading through this forum to try and fix the issue on my own but you could consider me an “extreme novice” on these topics and how to use website builders. My problem is the same as what some others have mentioned.
On my site (alifeofvitality.com), some of the panel images will span a whole screen — I use a MacBook Pro 15″ diagonal — but others do the repeating pattern to fill up the space. I tried resizing the pictures but that didn’t seem to work. Is there an easy fix to this? Do I need to use new images? I noticed in some of the other comments that doing some custom CSS is needed – if that is the case, where do I enter that in? How can that be done?
Thanks for the feedback! I really appreciate it!
-Shelby -
@alifeofvitality, I’ve viewed all of your posts on my phone and also on my iPad and see no repeating of images in either landscape or portrait orientation, or when rotating from one to the other.
If you go to the Pique Theme Showcase page and scroll to the bottom, in the Quick Specs you will see that the recommended minimum image size for featured images is 1400 x 1000 pixels. Are you trying to use images smaller than that?
- The topic ‘Pique theme – repetition of featured image as backgroung of panel page’ is closed to new replies.
WordPress.com Forums 