Responsive header in Apostrophe
-
Hey,
I’ve made a customer header for my new blog, I’m using Apostrophe theme (within the wordpress server, not my own). The header looks great until I view it on tablet or mobile screen size, then I only see a small chunk of it!
Can anyone give me some step by step advice on how to fix this and make it so my full header is visible in other screen sizes?
Thanks!
The blog I need help with is : changingthesails.wordpress.com
The blog I need help with is: (visible only to logged in users)
-
Hi there!
What is the issue that you’re seeing with the header? You mention the “full header”, but what does that include?
The responsive nature of the theme puts your pages – Home, About, Contact Me, etc. – in a menu that shows up on the left side of the screen on my mobile device. The blog posts are arranged underneath in order by date, newest first.
The header stacks the sun image on top of the “The sun will rise” text, which is also on top of “and we will try again”.
If you can post a screenshot of what you’re seeing that you think is going wrong, that may help.
There’s also a support page for the Apostrophe 2 theme: https://wordpress.com/theme/apostrophe-2/support
Let us know if you have any further questions.
-
If you look on mobile, I’ve got a custom header which says ‘LIFESTYLE – MENTAL HEALTH – TRAVEL’ and my wordpress address in the top right corner. On the mobile version, I can just see ‘LIF’ on the far right of the screen as the header isn’t responsive and as such I can’t see the full text. Not sure how to post a screenshot, oops!
Thanks again!
-
What device & browser are you viewing your site on? I’m viewing on Safari on iPhone and also Firefox on Mac, shrinking down to mobile size. The theme makes the transition between the headings – Home, About, Contact Me, Lifestyle, Mental Health, Travel – and puts them into a Menu when it gets below a certain size. I’m not seeing the behavior you describe on my devices.
What I *do* notice is that once the theme responsively puts the headings into the menu, the social media icons for Facebook, Twitter, and Instagram disappear.
-
Is there a way I can send you a screenshot to show you what I mean? It’s my actual header image itself that isn’t shrinking, nothing to do with the headings/pages etc. I’m viewing on iPhone 8 Safari and Safari on Mac.
That’s true – I hadn’t noticed! Is there an easy fix for this?
Thanks!
-
Hi there – Here’s a page with info on how to create and share a screenshot: https://en.support.wordpress.com/make-a-screenshot/
Probably easiest to upload to your Media Library and share the URL of the image. You can then delete once we’re done troubleshooting, if you like.
I don’t know of a fix for the social media icons, unfortunately. I would consider that a bug, but I don’t know what the theme authors had in mind for the responsive changes. You could report that at https://wordpress.com/help/contact. I don’t see a more direct way to report it right now but I’ll keep checking.
-
I see what you mean about the header getting cut off in mobile. (Note: I can’t see the new header with its additional text at all on my computer.) This is what I see on my various devices:
Snapshot in Safari on iPad in portrait orientation
Snapshot in Safari on iPad in landscape orientation
Snapshot in Chrome in Windows 7 on my laptop
I tested Apostrophe on one of my own sites and it seemed to resize no problem on every device. Can you post the URL for the new header media file?
-
https://wordpress.com/post/changingthesails.wordpress.com/161
I’ve added the screenshot in a page as I don’t know how to get the URL – sounds silly doesn’t it ha ha. If you can tell me how to then I’ll share the URL of the header file.
Thanks!!
-
-
Click to access c-l-i-m-b-c2a0e-v-e-r-y-c2a0m-o-u-n-t-a-i-n-4.pdf
Apologies, THIS is the link to the header. The previous is the link to my URL.
(I’ve been up for nearly 23 hours, sorry! Haha).
-
Oh, wow! Thanks @melancholia, I don’t see that ‘LIFESTYLE – MENTAL HEALTH – TRAVEL’ on either of my devices!
Here’s what I see:
-
I wasn’t seeing the ‘LIFESTYLE – MENTAL HEALTH – TRAVEL’ at all! Thanks for the screenshots @melancholia & @sashasmithhooke!
Here’s what I see:
-
I’m going to guess that the problem is coming from the fact that your header is a PDF file, not an image file. I didn’t even know that was possible. Certainly, responsive themes are going to have trouble trying to resize a PDF file on the fly.
-
It did the same thing when I used an image file :(
The only reason I used PDF was because the quality of the header was better. I made it on a site and it just seemed better when downloaded in PDF – but this was after I’d used it with a normal image and I still had the sizing issue then.
-
I’ve been playing around a bit, and I really don’t think you’re going to get the effect you want using that for a header.
Responsive themes like Apostrophe resize content to fit the screen you’re using. That doesn’t necessarily mean resizing the header image, just that it will shrink the header area to fit the screen (which usually means either using the full header or cropping the right hand side of the header image to fit the page accordingly). Typically header images are just that, images, with no text so you don’t really notice that they are being cropped as the page is resized.
You could always put the text you want in a widget at the top of your sidebar instead.
-
- The topic ‘Responsive header in Apostrophe’ is closed to new replies.
WordPress.com Forums 