Make a custom CSS for Squarespace Website (MARQUEE template)

  • Durum: Pending
  • Ödül: €20
  • Alınan Girdiler: 2

Yarışma Özeti

Dear Freelancer,

I need a custom CSS for my squarespace website ([login to view URL])
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!

Tavsiye Edilen Beceriler

Bu yarışmadan başlıca girdiler

Daha Fazla Katılım Görüntüle

Genel Açıklama Panosu

  • iurianu
    iurianu
    • 2 yıl önce

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

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

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

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

    .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 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

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

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

    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 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

    it ahppens to all squarespace templates, not only this one

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

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

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

    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 yıl önce
  • thexharbinger
    thexharbinger
    • 2 yıl önce

    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 yıl önce
    1. thexharbinger
      thexharbinger
      • 2 yıl önce

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

      • 2 yıl önce
  • thexharbinger
    thexharbinger
    • 2 yıl önce

    Hi, can I give you the solution directly here?

    • 2 yıl önce
  • iurianu
    iurianu
    • 2 yıl önce

    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 yıl önce
  • stijndelaere
    Yarışma Sahibi
    • 2 yıl önce

    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 yıl önce
  • saddy007
    saddy007
    • 2 yıl önce

    The URL is not redirecting to your website

    • 2 yıl önce
  • saddy007
    saddy007
    • 2 yıl önce

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

    • 2 yıl önce
  • saddy007
    saddy007
    • 2 yıl önce

    #guranteed please

    • 2 yıl önce

Daha fazla yorum göster

Yarışmalara nasıl başlanır

  • Projenizi ilan edin

    Yarışmanızı İlan Edin Hızlı ve kolay

  • Tonlarca girdi alın

    Tonlarca Girdi Alın Bütün dünyadan

  • En iyi girdiyi seçin

    En iyi girdiyi seçin Dosyaları indirin - Kolay!

Şimdi bir Yarışma İlan Et ya da Bugün Bize Katılın!