Jump to content

Recommended Posts

  • Replies 9
  • Created
  • Last Reply

Top Posters In This Topic

You can add this to Website > Website Tools > Custom CSS

/* Mobile Footer Logo */
@media screen and (max-width:767px) {
footer.sections .image-block * {
    text-align: left !important;
    margin-left: 0 !important;
    width: 30px;
}
}

image.png.44da31b4e332914eda9305b8c8e6c93c.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 9/2/2023 at 12:16 PM, tuanphan said:

You can add this to Website > Website Tools > Custom CSS

/* Mobile Footer Logo */
@media screen and (max-width:767px) {
footer.sections .image-block * {
    text-align: left !important;
    margin-left: 0 !important;
    width: 30px;
}
}

image.png.44da31b4e332914eda9305b8c8e6c93c.png

Hi @tuanphan
This worked perfectly, thank you so much!!!
Can you please also help me with two more things?

1. In mobile view, the categories in the shop filter are not all visible. The last category "Abstrakt" is cut off.
How can I fix that?

2. When clicking/filtering one category on mobile, I can't get back to the overview of all categories anymore. Can a path or filter made visible?

Thanks again
Sibylle

Link to comment
On 9/6/2023 at 4:57 AM, tuanphan said:

#1. It looks fine to me

image.png.df8ea20fd95a4162005c7ff5fb6afdac.png

#2. You mean add a back to shop button here, or show all categories, same as on shop page?

image.thumb.png.ef9a49330ec902839cae16f471f5dbe7.png

Hi @tuanphan
Thanks for your reply. Yes, the first problem I was able to solve 🙂
And for the second the "back to shop" button or in my case better "zurück zur Übersicht" would be very helpful.
Or in case that is not possible, showing all categories like on shop page would be ok as well.

Thank you so much
Best, Sibylle

Link to comment
On 9/11/2023 at 1:03 PM, Sibylle_Zurich said:

Hi @tuanphan
Thanks for your reply. Yes, the first problem I was able to solve 🙂
And for the second the "back to shop" button or in my case better "zurück zur Übersicht" would be very helpful.
Or in case that is not possible, showing all categories like on shop page would be ok as well.

Thank you so much
Best, Sibylle

You try adding this to Website > Website Tools > Custom CSS

/* Show category Link (ver 3 */
@media screen and (max-width:767px) {
	h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper {
    display: flex;
    float: none !important;
    max-width: unset !important;
    min-width: unset !important;
    width: 100% !important;
    padding-left: 0 !important;
}
h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}
    h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
	.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
		padding-top: 6px;
	}

image.png.a8aa4f40b38b08cb38df4a3fdb7743a0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 9/14/2023 at 10:18 AM, tuanphan said:

You try adding this to Website > Website Tools > Custom CSS

/* Show category Link (ver 3 */
@media screen and (max-width:767px) {
	h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper {
    display: flex;
    float: none !important;
    max-width: unset !important;
    min-width: unset !important;
    width: 100% !important;
    padding-left: 0 !important;
}
h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
}
    h2.nested-category-title.nested-category-title-padding + .nested-category-tree-wrapper ul li {
        margin-left: 10px;
        margin-right: 10px;
    }
	.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
		padding-top: 6px;
	}

image.png.a8aa4f40b38b08cb38df4a3fdb7743a0.png

Hello @tuanphan

Thanks for your help. This works well.
Can you help me to make the words much smaller and start more on the left, so it is displayed exactly the same as the filter on the overview page of the shop? See a screenshot attached.

Again big thanks!
Sibylle

 

IMG_6430.PNG

Link to comment
3 minutes ago, Sibylle_Zurich said:

Hello @tuanphan

Thanks for your help. This works well.
Can you help me to make the words much smaller and start more on the left, so it is displayed exactly the same as the filter on the overview page of the shop? See a screenshot attached.

Again big thanks!
Sibylle

 

IMG_6430.PNG

...and I just realized the filter is not displayed when choosing "Landschaft" - there is a bug. Would be nice to show it in the exact same styling as in the overview. With | as divider and the same font size. Thanks @tuanphan!

Link to comment

Hi,

So in short, you want

  • Make text smaller on this page + category pages: https://nuvu-gallery.squarespace.com/shop/
  • Start more on left: I see links align with title above it, can you describe it a bit clearly?
  • Show category links when clicking on each links in the list: Filter, Alle, Berge...

Is this right?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi @tuanphan

Thank you for your help.

I would like to have the same style of the filter list on the category page as it is on the shop page. Everywhere like this: https://nuvu-gallery.squarespace.com/shop/).  Separator lines between the categories, the same font size, and everything displayed in one line. When you click on a category, the filter list is showen like in the screenshot attached - what looks different! You can see in the screenshot, that the links are not aligned with the title above and the text is much bigger.

I am only talking about mobile! Thanks for your help.!
Sibylle

Bildschirmfoto 2023-09-22 um 14.02.42.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.