Results 1 to 4 of 4

Thread: Full Width Banner

  1. #1
    Join Date
    Sep 2017
    Posts
    194

    Default Full Width Banner

    So I'm after a full width banner our homepage, in the same way www.bluepark.co.uk have. In my limited experience it looks like this may be some sort of extension of the header? Or perhaps a second "fake" header underneath the first, sharing the CSS?

    Or I could be totally wrong and there's a really simple way of doing it

    Cheers,
    Tom

  2. #2
    Join Date
    Aug 2016
    Posts
    242

    Default

    Quote Originally Posted by tomtomg View Post
    Or I could be totally wrong and there's a really simple way of doing it
    Hi Tom,

    This depends on how your template is set-up or more specifically the width it is set to, so in order to have full-width sections on your website your template will need to be set globally at 100% width (to check this go into: Template Editor > Pages and under 'Settings for All Pages' look to see what's selected next to 'Page layout').

    Most of the newer templates are set to 100% width to allow the header, footer and carousel to span the full-width of the screen, but also contain some CSS and jQuery to restrict the width of the mid-section where the products, product page etc. are located as these don't look great or provide a good UX on the eye when spread-out across a larger monitor!!

    So as creating a new block that contains the image for your banner would sit inside this mid-section, you would then need to add some CSS to target that specific block to override it's inherited restricted-width to allow it to 'break free' and span the full-width.


    Hope that makes sense,

    Mike

  3. #3
    Join Date
    Sep 2017
    Posts
    194

    Default

    Ah, it does make sense
    Yes, the theme is set to 100% width with a Fixed Width Value of 1600px. As you say, the header and footer span the page.

    Any chance you know what css may do the job?

    Cheers,
    Tom

  4. #4
    Join Date
    Aug 2016
    Posts
    242

    Default

    Quote Originally Posted by tomtomg View Post
    Any chance you know what css may do the job?
    Tom
    When you create a new block it's assigned it own unique HTML I.D that you can then target via CSS. So to find this out, go into 'Block Editor' > 'Properties' and scroll down to 'Variable for HTML' - now make a note of just the number.

    Now lets say that number is 35 for example purposes, you can now add the following to the CSS to make that particular block 100% width:

    Code:
    #cb_id_35 {
    max-width: 100% !important;
    }
    Be aware though that if either of the left or right block columns are enabled, then the full-width WON'T work!! However, I assume you want the banner on your homepage and as such, you wouldn't really want these columns displayed there.


    Let us know how you get on,

    Mike

Similar Threads

  1. How do I do a full width banner that works on Mobile and high res PC?
    By DarkStarGames in forum Bluepark Technical Discussion
    Replies: 7
    Last Post: 10-09-2019, 12:17
  2. Full width slider
    By LabelKing in forum Bluepark Technical Discussion
    Replies: 8
    Last Post: 06-04-2018, 09:43
  3. Slideshow Full Width
    By dgb in forum Bluepark Technical Discussion
    Replies: 3
    Last Post: 03-09-2015, 16:06
  4. Full width header
    By Elliott in forum Bluepark Technical Discussion
    Replies: 0
    Last Post: 14-08-2015, 16:01
  5. Adding a Banner
    By Evie in forum Bluepark Technical Discussion
    Replies: 2
    Last Post: 25-11-2014, 15:25

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...