Jump to content

Archived

This topic is now archived and is closed to further replies.

jeomiland

How create header that has adaptive banner graphic that shows on all computers and devices?

Recommended Posts

jeomiland

Have been pulling my hair out with how to solve this problem. On http://cassclayton.com/dev/ I have a top banner graphic in the Header section. Have tried designating the BG image also have used Revslider for the image. Had a suggestion by someone to use Mediabox, but that's a content width section and I need the whole image to show full width and to resize in both width and height on different browsers, computers and devices. CLient reports it looks fine on her PC but husband's PC, with same kind of monitor, has her head and the bottom of the image cut off!!! Looks fine on my Macbook pro and an iPad and Galaxie phone I checked.

One of you out there must have run into this sort of problem. How do you get a full width graphic to resize and display the whole image in the banner area???

Attached is what it is supposed to look like. Note BB King on left and trupet player on right, her whole head and the dashed wavy line are all elements of the design that need to show up.

Thanks for looking and advise.

 

CassBanner.jpg

Share this post


Link to post
Share on other sites
Simon

you are using revslider to just add a full width background?

Just add a full width canvas area and give it a background and apply a height.

Share this post


Link to post
Share on other sites
jeomiland

Hi simon

What height should be used? The client says this banner has a lot of critically important design elements which need to show up, in a responsive way, on all browsers, platforms and devices. I will try assigning a background and height of the actual image (which is 1440x252) but think that's how this whole thing started - it was looking different on different computers and she was not happy with the image getting cut off.

Share this post


Link to post
Share on other sites
Simon

well maybe use media queries to make it look right on whatever devices she needs.

Share this post


Link to post
Share on other sites
jeomiland

she and her husband both have PCs and she says the same size screen. On his, the image was cutoff when it looked fine on hers.

Earlier, on here the top and bottom looked fine but left-right were cutoff.

Is there no section in DMS that is both full width and responsive? As mentioned, someone had suggested Media box, but this is content width. Site layout is pixel width based layout and full width display. What effect would percentage width or boxed display have on this requirment for the whole image to display responsively in banner?

Share this post


Link to post
Share on other sites
Simon

They both have PC with the same screen size yet one it looks ok and one it does not? Im afraid there is no CSS that will be able to target that.

You need to find out what the difference is between the couples two PCs first.

you can set any image background to 100% width but the aspect ratio will start to look weird at certain screen sizes.

Thats why you need to look at media queries to fix the issues..

 

Share this post


Link to post
Share on other sites
jeomiland

Hi Simon

Appreciate the heads up re: media queries and looking into it.

I found the solutions actually was to use a PL Nextbox into which I simply wrote HTML <img > code. Set the width to 100% and it seems to be working.

Share this post


Link to post
Share on other sites

×