Community Forums › Forums › Archived Forums › Design Tips and Tricks › Prose Header Not Responsive HELP
Tagged: header, not responsive, Prose
- This topic has 7 replies, 6 voices, and was last updated 9 years, 4 months ago by MktgLady.
-
AuthorPosts
-
June 25, 2014 at 8:22 pm #111570Kamilah8Participant
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.
roseJune 30, 2014 at 11:24 am #112120JanHoekParticipantCan 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.
September 9, 2014 at 9:27 am #123584nick42983MemberHello, 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
September 9, 2014 at 9:42 am #123591CraigMemberNick, 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.
September 9, 2014 at 10:24 am #123593nick42983MemberCraig, 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?
September 9, 2014 at 10:27 am #123595CraigMemberRegarding 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.
October 20, 2014 at 7:58 pm #128536Cyndy OttyMemberCraig -- Much thanks for the link to Alpha Blossom's code. Worked like a charm. 🙂
— Cyndy Otty —
http://gentlewit.comDecember 11, 2014 at 2:26 pm #134297MktgLadyMemberHeader 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 -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.