Make a custom CSS for Squarespace Website (MARQUEE template)

  • Status: Pending
  • Hadiah: €20
  • Penyertaan diterima: 2

Keterangan Peraduan

Dear Freelancer,

I need a custom CSS for my squarespace website ([url removed, login to view])
The images with parallax effect work great on desktop but are cropped (or zoomed) on mobile devices. I want them to be +/- full width and the height may be adjusted accordingly.
This should work on ipad and iphone versions of the website as well.

This is how the contest winner gets chosen:
The first one to show me a working version of the template which does NOT crop or zoom on mobile (you can use the standard marquee template with your own squarespace account, I just want to see the code is working) gets my admin login for my squarespace website. If you can subsequently make the code work on my website as well the price will be rewarded.

So... Step 1: Show me a working template on your own account
Step 2: With my login make the same thing happen on my squarespace website
Step 3: WIN!

Kemahiran-kemahiran Cadangan

Penyertaan teratas dari peraduan ini

Lihat Penyertaan Lain

Papan Penerangan Awam

  • iurianu
    iurianu
    • 2 tahun yang lalu

    Please give me and thex a recommendation, at least... Thank you!

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    Stijndelaere, i guess the contest money go to crea2boy, which I hope will solve your problem.

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    .class {
    width: 100%;
    min-height: 70vw;
    background-image: url('../img/bg-1-1000x627.jpg');
    background-attachment: scroll;
    -webkit-background-size: 100% 62.7vw;
    -moz-background-size: 100% 62.7vw;
    -ms-background-size: 100% 62.7vw;
    -o-background-size: 100% 62.7vw;
    background-size: 100% 62.7vw;
    background-position: top;
    background-repeat: no-repeat;
    }

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    i found the solution, my solution and thex's solution must be combined.. then, it gets to smth like this:

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    look, i used that here (http://iurianu.info/marque/); i used bs and a thousand media queries, and still i ignored the bg scrolling, as i focused on image resize

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    it ahppens to all squarespace templates, not only this one

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    thex, the attachment scrolls, and everything is ok before you get to the phone and tablet viewports, where the background is cropped

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    It should work using percentage in vw for height to keep the image ratio intact (ie the first image, for width 100%=100vw, height=62.7vw)

    • 2 tahun yang lalu
  • thexharbinger
    thexharbinger
    • 2 tahun yang lalu

    do this in your css::
    @media screen and (max-width: 1024px){
    //for each of the background image containing classes//{
    background-attachment: scroll;
    background-position: top;
    -webkit-background-size: auto;
    -moz-background-size: auto;
    background-size: auto;
    }

    }

    • 2 tahun yang lalu
    1. thexharbinger
      thexharbinger
      • 2 tahun yang lalu

      add all the classes/selectors with comas.
      and you can change the px value if needed.

      • 2 tahun yang lalu
  • thexharbinger
    thexharbinger
    • 2 tahun yang lalu

    Hi, can I give you the solution directly here?

    • 2 tahun yang lalu
  • iurianu
    iurianu
    • 2 tahun yang lalu

    Hi, I think the problem with your website is a script problem, as it sets a fixed height, and width auto. Either you modify the script (which is not simple at all), or you can pay me the 20 euro and I make an identical one (or even better) using bootstrap. Advantages: less scripts (loads faster), more customizable texts, images etc. My advantage: I get a rating, and a piece on my portfolio., and maybe the opportunity to work for you again, in the future, if you like my work.

    • 2 tahun yang lalu
  • stijndelaere
    Pemegang Peraduan
    • 2 tahun yang lalu

    Ok, it is .be.. I corrected it. I can't make it guaranteed because I am not sure if someone can do it :-) But the first one to make it happen gets the price immediately

    • 2 tahun yang lalu
  • saddy007
    saddy007
    • 2 tahun yang lalu

    The URL is not redirecting to your website

    • 2 tahun yang lalu
  • saddy007
    saddy007
    • 2 tahun yang lalu

    Hello Sir
    I'm a front-end developer and have developed many responsive website. Could you please Skype with me?

    • 2 tahun yang lalu
  • saddy007
    saddy007
    • 2 tahun yang lalu

    #guranteed please

    • 2 tahun yang lalu

Tunjukkan lebih banyak komen

Bagaimana mula dengan peraduan

  • Papar peraduan anda

    Papar Peraduan Anda Cepat dan senang

  • Dapatkan bertan-tan penyertaan

    Dapatkan Bertan-tan Penyertaan Dari seluruh dunia

  • Anugerahkan penyertaan terbaik

    Anugerahkan penyertaan terbaik Muat turun fail-fail - Senang!

Papar Peraduan Sekarang atau Sertai kami Hari Ini!