Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Erlend-fs

Member
  • Posts

    63
  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Works great! I chose to use "min-width: 767px", since I am happy with how the page displays on mobile. @media only screen and (min-width: 767px) { section[data-section-id="6052fff2787304435eeb60b2"] .content > .sqs-layout .row:nth-child(2) { display: flex; flex-direction: row; justify-content: center; align-items: stretch; align-content: center; } section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 { position: relative;flex-grow: 1; flex-shrink: 1; flex-basis: auto;width: 50%; } section[data-section-id="6052fff2787304435eeb60b2"] #page-section-6052fff2787304435eeb60b2 .row:nth-child(2) .sqs-col-6 .sqs-block-form { position: absolute; width: ~"calc(100% - 34px)"; bottom: -50px; } } Thanks a lot bangank36
  2. Site URL: https://spinach-keyboard-w7ws.squarespace.com/fallsikringskurs Hello! I've made a two column layout with one button at the bottom of each column. I would like to align the two buttons on the same horizontal level in desktop mode. I know this can be achieved by adding a line break, before adding the two buttons. But this makes the layout display wrong on mobile, since the two columns breaks into one column (below each other) on mobile, and the buttons will then be placed at the bottom of both text boxes. Any idea anyone?
  3. Here is what Squarespace says about the issue: Shayler W. (Squarespace) Apr 20, 2021, 4:05 PM EDT Hey Erlend, Thanks for following up on this. We appreciate your patience while we track this issue. I've checked with the team and I'm afraid we don't have any updates on this quite yet. That said, we have noted your feedback, and it hasn’t been ignored. The time it takes to find a solution is due in part to the complexity and challenges of releasing that type of fix, and the volume of design solutions available that don't experience this behavior. We’ll use your case to help prioritize upcoming bug fixes and product updates within the Squarespace platform. I apologize that you're still experiencing this issue. In the interim, please let us know if you have any further questions - we're here for you 24/7. All the best, Shayler W. http://support.squarespace.com
  4. Yesterday, I found a workaround to fix the bug. By making two identical header sections, and using this code the advanced section in the setting of each page (found in this guide) <style> @media only screen and (max-width: 780px) { #page section:nth-of-type(1) { display: none; } } @media only screen and (min-width: 781px) { #page section:nth-of-type(2) { display: none !important; } } </style> This makes the first banner section appear on desktop, and the second banner section appear on mobile. For some reason, this fixes the bug, and the mobile banner page appears in good quality.
  5. This is close. Things gets correct on desktop and mobile, but the layout won't break correctly into the two column layout.. Se attached image. But I managed to find a solution that seems to work good. https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester I built the page with the images beside each other in one row, and used the following code to make it break into three columns -> two columns -> one column. /*FALLSIKRINGSTJENESTER - three columns below 2500px **********/ section[data-section-id="6077ccdd3d481051ff651d72"], { @media screen and (max-width: 2500px) { .span-12 .span-2 { width: 33% !important; float: left !important; } } section[data-section-id="6077ccdd3d481051ff651d72"], { .span-2 .sqs-block-content { width: 100% !important; } } } /*End- three columns below 2500px **********/ /*Bildemeny FALLSIKRINGSTJENESTER - Two column on tablet*/ section[data-section-id="6077ccdd3d481051ff651d72"], { @media screen and (max-width: 995px) { .span-12 .span-2 { width: 50% !important; float: left !important; } } section[data-section-id="6077ccdd3d481051ff651d72"], { .span-4 .sqs-block-content { width: 100% !important; } } } /* End- Bildemeny FALLSIKRINGSTJENESTER - Two column on tablet*/ /* FALLSIKRINGSTJENESTER*/section[data-section-id="6077ccdd3d481051ff651d72"], { @media screen and (max-width: 450px) { .span-12 .span-2 { width: 100% !important; float: left !important; } } /* FALLSIKRINGSTJENESTER*/section[data-section-id="6077ccdd3d481051ff651d72"], { .span-4 .sqs-block-content { width: 100% !important; } } } /* End -------------- Bildemenyer - one column below 400px----------------*/
  6. I mean that the order of the images are mixing up when scaling down from desktop to tablet and mobile. See attached images. Ideally, the order would be 1,2,3,4,5,6
  7. Than you tuanphan. This did work with some tweaking. The only challenge now, is the order of the images. The order stocks, when scaling from three->two columns, and from two-> one column. I know how you snap (build) the page controls this, but when I do the snapping to make the order be right, the scaling does not work again.. https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester
  8. Thanks for your reply tuanphan, and thanks for your tips about the SEO headings. I have updated them now👍 Unfortunately, I haven't found a solution to the image grid. This is a link to the site, where I have arrange the images as I would like them to be (three columns on desktop, two columns on tablet, one column on mobile). As you can see, there is a bug when they scales into two columns (see screenshot below)
  9. Sorry, I think you misunderstood. I'm very happy with this page: https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau It scales from 4 to 2 columns to 1 column (depending on screen with). I would really like to do the same with this page: https://spinach-keyboard-w7ws.squarespace.com/fallsikringstjenester But on this page, I would like to have a three column grid (instead of four columns), that scales down to 2 column and 1 column (depending on screen width. Is this possible?
  10. Ok. That's great. But is there a way to get the image grid I have built to scale from three -> two columns also? I'm using this grid in several other pages, and I have spent a lot of time to build it. So it would be great to use the same structure (if possible) https://spinach-keyboard-w7ws.squarespace.com/tjenester-fra-tau
  11. Thanks for your reply bangank36. You are correct. A gallery will scale from three -> two columns in a good way. But I'm not getting the Captions to look the same in a gallery (see screenshot below). I would like to have the captions on the image, like in my example in the previous post. So if it could be possible to find a solution to my previous question, it would be great!
  12. I'm now using these two codes, and it works fantastic!!!🤩 Thank you so much tuanphan!! /* header color- landing */ #collection-602bc23de4dc477c940dd427 { header { background: rgba(55,59,61, 0.1) !important; } } /* header color on scroll */ #collection-602bc23de4dc477c940dd427 { header.shrink { background: rgb(55,59,61,) !important; } }
  13. Thanks for your reply tuanphan! I added the following code to the CSS, and the front-page now looks like this: /* header color */ #collection-602bc23de4dc477c940dd427 { header { background: rgba(55,59,61, 0.2) !important; }} As you can see, I've added transparency to the header, and I am happy with this (when you land on the front page.) But I want to remove the transparency "on-scroll" (the menu gets hard to read with content behind) Is it possible to add another color-code to the header "on-scroll"?
  14. Of course! https://spinach-keyboard-w7ws.squarespace.com
×
×
  • Create New...