I am using the responsive theme Pictorico but it is not behaving responsively.
-
I am using the responsive theme Pictorico on site esbremit.wordpress.com but it is not behaving responsively. I have enabled the Mobile Theme in Appearance: Mobile without it having an effect. If I either reduce the screen size or reduce the zoom from 100% then the header image gets cropped more and more rather than shrinking in response to the decreased space available to it. This is unlike what happens with the site when using the Live Demo in the theme.
Am I missing something?
Any advice as always gratefully received.John
The blog I need help with is: (visible only to logged in users)
-
Hey John,
If you would like to use the responsiveness of the Pictorico theme, you actually want to disable the mobile theme under Appearance -> Mobile. Enabling that mobile theme replaces your Pictorico theme with the default WordPress.com mobile theme on mobile devices. You can read more about the differences here:
http://en.support.wordpress.com/themes/mobile-themes/
When you disable the mobile theme, the Pictorico theme will continue to be active on mobile devices and should resize appropriately. Here’s how your site should look on mobile browsers:
Can you disable the mobile theme and let me know if this is what you experience?
-
Hi Jeremy, no change. I actually had the mobile theme off originally and was experiencing the problem with the header image being chopped at the top and bottom as I decreased zoom or if I decreased browser size. It appears to be only the header image which is affected. I then thought that turning mobile on might be the solution but it obviously wasn’t. When I decrease zoom percentage or decrease the top and bottom get chopped but the width remains constant. It looks totally weird if you want to have a look. I’m suppose to demo this to a user group tomorrow, so no pressure!!!
John -
Hey John,
Can you give this bit of CSS a try? It prevents the header image from being cutoff on the Pictorico theme for mobile devices:
@media screen (max-width: 320px) { .has-thumbnail .entry-header { min-height: 200px; } }Let me know if that works for what you’re looking for!
-
Hi Jeremey, no luck with that. The header image still keeps getting cropped to a smaller segment of the image rather than resizing to a smaller verssion of the full header image.
I think I’ll switch to another theme.
John -
Hey John,
Perhaps I’m not understanding what you’re looking for. Here’s what I see when I visit your site on mobile with that CSS input:
In that example, the bottom of the image is shown, rather than cutoff like normal. Is that not what you’re referring to?
-
Hi Jeremey, unfortuantely, the cloudup address is blocked from my workplace so I can’t access it currently. I’ll try to explain what happens in greater detail.
I’m working in Chrome and IE9, the results are pretty much the same in both. Open the site in a web browser at full screen size and zoom at 100%. The site should diplay with the header image an the header image is a combi image I did of a white banner of approx 150 px high on top of a picture of a powerstation. The white banner has our company logo an a streamer wave. all should look ok now. Reduce the zoom on the browser and the output of the site will decrease in size but the header image remains the same width but crops content off both the top and bottom of the header image so that you end up with a part of the power station chimney showing. A similar thing happens if you reduce the browser size, though this time it goes through phases of the image being partly displayed in full width and when the browser size decreases sufficiently. On my mobile phone (Samsung Galaxy), the effect is the same, i.e. the top and bottom of the header image are chopped off.
Hope that you can follow the above and thanks for your interest.John
-
Hi Jeremey, unfortuantely, the cloudup address is blocked from my workplace so I can’t access it currently. I’ll try to explain what happens in greater detail.
I’m working in Chrome and IE9, the results are pretty much the same in both. Open the site in a web browser at full screen size and zoom at 100%. The site should diplay with the header image and the header image is a combi image I did of a white banner of approx 150 px high on top of a picture of a powerstation. The white banner has our company logo and a streamer wave. All should look ok now. Reduce the zoom on the browser and the output of the site will decrease in size but the header image remains the same width but crops content off both the top and bottom of the header image so that you end up with a part of the power station chimney showing. A similar thing happens if you reduce the browser size, though this time it goes through phases of the image being partly displayed in full width and when the browser size decreases sufficiently the image renders ok again. On my mobile phone (Samsung Galaxy), the effect is the same, i.e. the top and bottom of the header image are chopped off.
Hope that you can follow the above and thanks for your interest.John
-
Hey John,
Zooming in and out on the screen doesn’t trigger the responsive design of the theme. A better test is to navigate to Appearance -> Customize and use the screen icons at the bottom to simulate a tablet screen and phone screen. However, one thing to note regarding those buttons, the most recent CSS addition (the media screen bit) will not render correctly using the Customizer buttons. That CSS is only activated if the screen size is a certain width. Although the Customizer shrinks the screen, it doesn’t activate the CSS code.
A similar thing happens if you reduce the browser size, though this time it goes through phases of the image being partly displayed in full width and when the browser size decreases sufficiently the image renders ok again.
You’re seeing different break points in the theme. Basically, when the screen hits certain sizes, rearrangements are made to the content. You can think of it in sections. Between 20 pixels and 40 pixels, this happens. Between 40 pixels and 60 pixels, that happens (pixel numbers are just as an example). Does that make sense?
On my mobile phone (Samsung Galaxy), the effect is the same, i.e. the top and bottom of the header image are chopped off.
When you enter this code, that should be resolved:
@media screen (max-width: 320px) { .has-thumbnail .entry-header { min-height: 200px; } }The CloudUp link was a screenshot of my iPhone 5 with the header image displaying in its entirety. Can you try saving that code, clearing your mobile browser cache, and refreshing your screen?
-
Thanks for responding so quickly. I think you may be misunderstanding me. My problem is not to do with how responsive or otherwise the site is, it is to do with how the header image is rendering when you reduce the zoom size and / or reduce the browser size, i.e. the header image is staying at full width but becoming thinner and thinner in height while the rest of the output is reducing / resizing itself. However in looking at the sample sites quoted for this site, I think I may have seen the reason why this is happening. Look at http://ligiapop.com/. Here when you reduce the zoom on this site, the slider at the top stays full widt whilst the images below reduce in size. This is the same thing which is happening to my site except that I do not have a slider on the header on front page, just an image. So I reckon that the site does not really work with a fixed image and it needs to have the slider utilised. I have got that started but I reckon that’s enough for today for me on Irish time! this looks to be a very powerful theme, probably too powerful for what I need but amazing for something that is free.
Thanks again for your assistance.
Have a nice weekend.John
-
Hey John!
It looks like you activated the slider on the theme. Is it looking better on your side now that the slider is activated?
-
Hi Jeremey,
Yep, I think this theme is not really suitable for a single image header, i.e. it needs you to use the slider. Thanks for your assistance.
John
- The topic ‘I am using the responsive theme Pictorico but it is not behaving responsively.’ is closed to new replies.
WordPress.com Forums 