Prose Header Not Responsive HELP

[Kamilah8]

Hello, I have Prose installed in my blog and my header is not responsive on mobile devices. My header is not resizing to fit any size screen, any suggestions so I fix this problem? 😉

Thanks.
rose

[JanHoek]

Can you post the url so we can have a look?

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[nick42983]

Hello, I am having the same issue with the Prose theme. Both my header and post images are being clipped in Mobile. I've looked at the site on my iPhone 4S and iPad Mini. The text, menus and widgets all seem to be mobile responsive. I tried uploading the header as a png, jpeg and tiff file, but all were clipped.

my site is: http://www.researchteacher.com

[Craig]

Nick, there are a couple of separate issues to work through here.

Your header is not resizing according to viewport size because it is a large background images, and background images don't work in this way.

One solution is to use a plugin such as Genesis Responsive Header, which will then allow you to specify three or four different header images which are used depending on viewport width. (Link:http://designsbynickthegeek.com/plugins/genesis-responsive-header)

Alternatively, Alpha Blossom have made this tutorial available, which will make your header an inline image and as a result will scale down as the screen narrows. (Link:http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/)

Your post images are a different issue. They are remaining at their fixed dimensions because these dimensions have been specified when the image was inserted. Using your first post image as an example, if you look at the post in the code editor, your you will see something like:

<img src="/your/image/source.jpg" height="547" width="325" alt="Alternative text" />

By declaring the images width and height here, you are preventing it scaling down when the browser resizes. Removing the width & height attributes altogether will limit the images size to the width of your content column, and will allow it to resize appropriately.

---

@craigsimps | craigsimps.com

[nick42983]

Craig, many thanks for your prompt and thorough reply. I will try these solutions out.

One problem I am already running into is with the images. I removed the width and height attributes and it does scale, but this also eliminated the caption. When I re-inserted the caption, it makes the image wide and clipped again. Is it possible to also have the caption scale?

[Craig]

Regarding captions, try adding something like this at the end of your style.css file:

.wp-caption {
    max-width: 96%;
}

You can obviously tweak the max-width value to suit.

---

@craigsimps | craigsimps.com

[Cyndy Otty]

Craig -- Much thanks for the link to Alpha Blossom's code. Worked like a charm. 🙂

---

— Cyndy Otty —
http://gentlewit.com

[MktgLady]

Header image in PROSE not responsive...right side is getting cut off when viewed on a smartphone and also when viewed "vertically" on a 10.1" tablet. Both of these sites have the same problems:

http://www.FioriSkin.com (header image has a flower branch on the left side & the right side, with biz name & phone in the middle)

http://www.AccountantUnlimited.com (header image has phone/fax # on right side, with logo/name/url on the left side)

Both headers were uploaded as 940 x 150 jpegs. I read this tutorial, http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/, from Alpha Blossom and it does not help me because I do not know how to alter CSS and am nervous about altering php files. Can I fix the problem without having to alter any code?

Also, is the main navigation menu in Prose supposed to collapse and allow people to select a page from a drop down menu? (My sites have fully expanded menus that wrap onto 2, 3 or 4 lines when viewed on a smartphone and vertically on my tablet.)

Thanks,
Kimberly

[Author]

Posts