Results 1 to 8 of 8

Thread: How do I do a full width banner that works on Mobile and high res PC?

  1. #1
    Join Date
    Jul 2019
    Posts
    41

    Question How do I do a full width banner that works on Mobile and high res PC?

    How do I do a full width banner that works on Mobile and high res PC?

    Currently I've just got a really wide banner that should work on the highest resolutions of PC monitors. But apparently this is causing issues on mobile devices when the customer tries to view the "full site" rather than the mobile website (I guess their iPad has a large enough screen and high enough resolution to view it properly) .

    Basically the iPhone/iPad (and my samsung android phone is doing something similar in testing) is scaling the page so that the banner fits the width of the screen but this is scaling the main part of the page to about half width.

    My banner isn't repeating or plain colour, so how do I get it to fit all resolutions without causing this issue?


  2. #2
    Join Date
    Jul 2019
    Posts
    41

    Default

    Also, the customer reports he didn't see the mobile version (I thought he clicked "full site" at the bottom of the mobile page, but apparently not) - so what would cause a mobile device to default to the full version rather than the mobile version? Is that a browser setting, a client issue or something wrong with the mobile version?

  3. #3
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by DarkStarGames View Post
    How do I do a full width banner that works on Mobile and high res PC?

    Currently I've just got a really wide banner that should work on the highest resolutions of PC monitors. But apparently this is causing issues on mobile devices when the customer tries to view the "full site" rather than the mobile website (I guess their iPad has a large enough screen and high enough resolution to view it properly) .
    Your header background is 2800px wide and doesn't behave responsively, so any screen resolution below this will result in Horizontal scroll bars. A better way to do this would be to get rid of the single background image and instead use a repeating tile - the background will then automatically adapt itself to the screen size it's being viewed on as well as having the additional benefit of having a much smaller file size.

    Mike
    Last edited by Mikey; 10-09-2019 at 01:23.

  4. #4
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by DarkStarGames View Post
    Also, the customer reports he didn't see the mobile version (I thought he clicked "full site" at the bottom of the mobile page, but apparently not) - so what would cause a mobile device to default to the full version rather than the mobile version? Is that a browser setting, a client issue or something wrong with the mobile version?
    I've checked your site on both my Samsung and within Chrome's 'inspect' tool and it displays the mobile version as it should, so the only thing I can think of is that the customer accidentally touched the 'View Full Site' whilst the page was loading without realising or they had the 'Desktop Site' option ticked in their mobile browser which then will skip the mobile site and load the desktop version.

    Mike

  5. #5
    Join Date
    Jul 2019
    Posts
    41

    Default

    Quote Originally Posted by Mikey View Post
    Your header background is 2800px wide and doesn't behave responsively, so any screen resolution below this will result in Horizontal scroll bars. A better way to do this would be to get rid of the single background image and instead use a repeating tile - the background will then automatically adapt itself to the screen size it's being viewed on as well as having the additional benefit of having a much smaller file size.

    Mike
    When using a repeating tile will the browsers automatically fit to screen (ie. chop the last tile if it would go over the edge)?

  6. #6
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by DarkStarGames View Post
    When using a repeating tile will the browsers automatically fit to screen (ie. chop the last tile if it would go over the edge)?
    Yes correct, but as always I'd suggest making of a copy of your template first and experimenting with that so that you can easily revert back if you go wrong.

    Mike

  7. #7
    Join Date
    Jul 2019
    Posts
    41

    Default

    So technically couldn't I just have 1 really big tile (ie. the graphic I have now) and it would chop it as appropriate?

  8. #8
    Join Date
    Aug 2016
    Posts
    132

    Default

    Quote Originally Posted by DarkStarGames View Post
    So technically couldn't I just have 1 really big tile (ie. the graphic I have now) and it would chop it as appropriate?
    Yep you could - you just wouldn't benefit from the smaller file size of course.

    Mike

Similar Threads

  1. Why proforma on failed but not remote??? How do I do it?
    By LabelKing in forum Bluepark Technical Discussion
    Replies: 5
    Last Post: 03-09-2015, 10:12
  2. How do I make phone number clickable for mobile devices
    By kedel in forum Bluepark Technical Discussion
    Replies: 5
    Last Post: 12-12-2014, 09:23
  3. How do I put a banner/image at top of the product page?
    By LabelKing in forum Bluepark Technical Discussion
    Replies: 0
    Last Post: 18-07-2014, 12:47
  4. Do you need a scrolling banner of ebay items for your website?
    By pinkypie in forum Bluepark Technical Discussion
    Replies: 4
    Last Post: 30-06-2014, 21:16
  5. How do I do this to an email I want to send via email manager?
    By pinkypie in forum Bluepark Technical Discussion
    Replies: 10
    Last Post: 09-06-2010, 14:49

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
About us

Bluepark's ecommerce software is developed, hosted and supported exclusively by ourselves, here in the UK, and has been so since the company was initially formed in 2004. Your brand new online shop will be hosted securely on our fast and reliable server network, using a domain name of your choice, providing the ability to build and maintain your ecommerce website, and manage your orders, from any location via your own secure online Administration Console.

A Bluepark ecommerce site is the perfect tool for selling online, whether you're selling physical products, digital downloads or services. You'll be in good company with over 1,000 UK customers who also form a friendly and helpful online community, further strengthening our highly acclaimed support network.

Find us on...