Erlend-fs
-
Posts
78 -
Joined
-
Last visited
Content Type
Forums
Gallery
Blogs
Events
Store
Downloads
Profiles
Everything posted by Erlend-fs
-
Thanks for your reply Beyondspace. With drag element in Fluid Engine, I'm able to make a mobile and a desktop layout. But not the tablet layout. In desktop layout, I want four images in a row. (accomplished) In tablet layout, I want two images in a row. (not accomplished) In mobile layout, I want one image in a row. (accomplished) Any way to do this?
-
Hello! By using custom CSS in Squarespace 7.1 with the Classic editor, it's possible to control the number of columns by the width of the screen. As an example, the images on this site, appears in: one column on mobile (below 450px) two columns on tablet (screen size between 450 and 980px) four columns on desktop (screen size wider than 980px) This is controlled by the CSS coding below. My question is: With the Fluid Engine, is it possible to do something similar (with or without custom css)? /* Bildemenyer - Two column on tablet and mobile*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 980px) { .span-12 .span-3 { width: 50% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } } /* End- Bildemenyer - Two column on tablet and mobile*/ /* -------------------Bildemenyer - one column below 450px--------------*/ /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { @media screen and (max-width: 450px) { .span-12 .span-3 { width: 100% !important; float: left !important; } } /*Tjenester fra tau*/section[data-section-id="602cca273f845d30031c13b6"], { .span-3 .sqs-block-content { width: 100% !important; } } }
-
Hello! I'm new to Fluid Engine, but it seems really good. Link to the page I'm working with: https://www.hoyden.no/fallsikringskurs-fluid I wonder if there is a good way to make the text on this section break into "one column" (appear above and below each other, rather than beside each other), on screen size smaller than 1300px? I have earlier achieved this with the classic editor by adding the CSS code below. This does not work after upgrading the section to FE, and I guess it is because FE does not use columns in the same way as the classic editor. So, is there some other code or another way to achieve this, after upgrading to FE? section[data-section-id="609a48d7e92ddb651e864899"], { @media only screen and (max-width: 1300px) { .col { width: 100% !important; }}} I want the text in the circle to appear under the other text box, when screen size is below 1300px '
-
That's correct, I have attached two and two logos together. This is beacause I want a two column layout in mobile, and the pages breaks very nice into this when two and two logos are attached together. But if there is a better way of doing this, I am very happy to change it. Any suggestions, how to solve both things? Erlend
-
Hello! I know it is "best practice" to always upload compressed images to web reduce load-time etc. But I wonder if Squarespace anyway will compress the uploaded files, so there will be no need to do it beforehand? I'm adding a link to a page where I have made an image gallery (slide-show), built in Squarespace 7.1, Fluid Engine: https://www.hoyden.no/universitetsgata-7 (The images in this slideshow is not compressed before uploading) Erlend
-
"Make it stand out" text has appeared in between the content
Erlend-fs replied to Erlend-fs's topic in Customize with code
Hello again! Yes, I got help from Squarespace support to remove this. Thank you anyway tuanphan! -
"Make it stand out" text has appeared in between the content
Erlend-fs replied to Erlend-fs's topic in Customize with code
Thanks for your reply Tuanphan. I tried this now, but the it become a huge blank space in the site (see screenshots below). And still some "sample text" there.. Do you have any other suggestions?
-
Site URL: https://www.hoyden.no/fallsikringskurs Hello! Default template text ("Make it stand out") has appeared in between the content on our website. I'm not able to edit/ remove the text in the editor... Anyone know how to fix this bug? See images below and link to the website https://www.hoyden.no/vindusbytte https://www.hoyden.no/fallsikringskurs
-
Site URL: https://www.hoyden.no/munchmuseet Hello! I have uploaded logos beside each other on this page. When the site is viewed on a large screen (above approx 1700px), the images gets more space between them, and disturbed horizontally along the whole screen. But I want them to be aligned to the left, with the same spacing all the time. Is there a easy way of doing this?
-
Great thanks!!
-
Thanks a lot bangank36! Is there also a way to remove the spacing beside the text (below 767px), so the footer will be completely left and right aligned? (see attached image). It would be great!
-
Site URL: https://www.hoyden.no Hello! I've made a really simple footer. It contains of two text boxes beside each other. On desktop, the page displays as I want. Under 767px (on mobile), the footer breaks into two different lines upon each other. I want the text to be beside each other. Anyone with a suggestion for how this could be solved? It's built up with two text boxes besides each other: (left aligned to the left and right aligned to the right) It looks correct on desktop: On mobile (below 767px) it breaks into two lines upon each other, and I don't want this
-
Thanks for your reply tuanphan. I did as you suggested, and found a solution:)
-
Site URL: https://www.hoyden.no Hello! I have installed this plugin to get a mega-menu on our site: https://thompsonweb.design/squarespace-plugins/p/mega-menu-plugin-squarespace Our header menu has a transparent background when you are on top of the page. When you scroll down, the menu gets a background color. When you hover the menu, the mega menu appears below the header menu. And when you do this when you are on top of the page, it looks a bit strange, since the mega menu has a background color. I wonder if it's possible to make the header-menu have a background color when you have "opened" the mega menu? So that everything displays with the same background color? Har to explain, but I'm attaching a screenshot. It would be great if anybody could help with this. www.hoyden.no Erlend
-
There is no problem anymore here. But 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.
-
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
-
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?
-
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
-
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.
-
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; } }
-
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"?
-
Of course! https://spinach-keyboard-w7ws.squarespace.com
-
Squarespace support told me that the will look into the problem and find a solution👍
-
I have sent them a request, but no answer yet. Did you find a solution?
-
I have the same issue, which I have explained here: Did you find a solution?
