CSS help with layering of site content

Hi need some help with the layering of content on my site.

See Screencast - http://take.ms/NCzVwg
Also need some help to centre some content - http://take.ms/d3Cnj

Domain - http://tinyurl.com/ounlhnf

Support Access is open until 25th Jan 22:00

Thanks

Tom

  • Rupok

    Hi Tom

    I hope you had a wonderful day.

    You said "need some help with the layering of content on my site". Can you please specify exactly what help you are asking for?

    See Screencast - http://take.ms/NCzVwg
    I just saw this video http://take.ms/NCzVwg. But I'm not quite sure exactly what you want us to help you with. I went to your site and found that you have a "background-attachment: fixed" background on your site and content is going up and down which is working as two layers. Do you want the background to move too?

    Also need some help to centre some content - http://take.ms/d3Cnj
    I made the body content and footer center aligned with the following custom CSS Code:

    .right-sidebar .content-area {
    	width: 100%;
    }
    
    .site-info {
    	text-align: center;
    }

    Please let us know if you need anything else. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Tom

    Hi Rupok,

    Thanks for your reply.
    The issue i have is that the clouds effect is currently in the background but i need it to display at the Front so that all other page content is displayed behind it see here - http://take.ms/1pMan

    the Page content appears to be centered again with that code. Thanks very much.

    Im also having some issues with the Cloud element when viewed on mobile device its showing as full width, if there is a way to scale to fit the page width ? if not is it possible to hide the cloud effect from mobile devices? so that it does not affect the page size?
    1- http://take.ms/IpGwD
    2- http://take.ms/7g9aC

    Thanks

    Tom

  • Rupok

    Hi Tom

    I hope you had a wonderful day.

    Use the following custom CSS code for making the footer floating at bottom of the page and display all other content behind the cloud.

    #foot_wrapper {
      bottom: 0;
      position: fixed;
      width: 100%;
      z-index: 999;
    }

    The way the cloud is being shown now (css content before), it will require to change the structure for making the cloud fit the screen width. The custom CSS above will make some adjustment. Please run this and check. If you still think you need to go through structure change of the footer for the cloud, let us know.

    However, if you want to hide the cloud on mobile screens, you can use the following custom CSS Code:

    @media screen and (max-width: 480px) {
        .site-footer::before {
              content: "";
        }
    }

    Have a nice day. Cheers!
    Rupok

  • Tom

    Hi Rupok,

    Thanks very much, the first code worked perfectly the site content is now restricted to the page which is great.
    Have 3 small issues.
    1) is it possible to move the graphic of the cloud slightly to the left or centered it more ? the issue is that the links at the bottom are part covered "Ambassador" link is almost out of the cloud area. see here - http://take.ms/daMsY

    2) Centering page content / scale to fit - http://take.ms/oLRT0

    3) Is it also possible to move the Cart to the top so that it is inline with the logo ? - http://take.ms/kuHJ7

    Thanks

    Tom

  • Rupok

    Hi Tom

    I hope you had a wonderful day.

    1) is it possible to move the graphic of the cloud slightly to the left or centered it more ? the issue is that the links at the bottom are part covered "Ambassador" link is almost out of the cloud area. see here - http://take.ms/daMsY

    Please use the following custom CSS Code:

    .site-footer::before {
      bottom: 75px !important;
      top: auto !important;
      content: url("http://www.boltprints.com/wp-content/uploads/2015/11/Clouds-up-1024x95.png");
      display: block;
      left: -15px !important;
      position: fixed !important;
    }

    2) Centering page content / scale to fit - http://take.ms/oLRT0

    Please use the following custom CSS code:

    @media screen and (max-width: 780px) {
        main#main {
            max-width: none !important;
        }
    }
    @media screen and (max-width: 480px) {
        main#main {
            max-width: none !important;
        }
    }

    3) Is it also possible to move the Cart to the top so that it is inline with the logo ? - http://take.ms/kuHJ7

    Yes, it's possible but this will require quite advanced restructuring with custom CSS which is beyond our support scope.

    Have a nice day. Cheers!
    Rupok

  • Tom

    Hi Rupok,

    Thanks very much for the reply 1 and 2 seem to work perfectly.
    Could i ask one more thing please.
    is it possible to add some padding to the bottom of all pages when viewed on mobile devices? as currently due to the clouds position they are hiding the content behind which is fine just want user to still be able to see the buttons / content. please see screenshot - http://take.ms/hZUOo

    Also in regards to the (3) i will try post on the jobs area.

    Thanks
    Tom

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.