Help with logo size in footer

Hi there

https://nuvu-gallery.squarespace.com/
PW: nuvu2022

I would like to place the white icon "n" in the footer left aligned and not centred. Is there any possibility?

Thank you so much!
Best, Sibylle

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;
}
}

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;
}
}

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

#1. It looks fine to me

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

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

#1. It looks fine to me

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

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

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;
	}

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;
	}

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

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

 

...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!

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?

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

You can use this CSS code to align title - links

@media screen and (max-width:767px) {
h2.nested-category-title.nested-category-title-padding+.nested-category-tree-wrapper ul li {
    margin-left: 0 !important;
}
}

On 12/22/2023 at 12:12 PM, tuanphan said:

You can use this CSS code to align title - links

@media screen and (max-width:767px) {
h2.nested-category-title.nested-category-title-padding+.nested-category-tree-wrapper ul li {
    margin-left: 0 !important;
}
}

 

Thank you @tuanphan

Unfortunately, that does not work. It is just squeezing everything together. I would like to start with the whole filter blog on the very left and want to keep the vertical lines in between the categories - like on the main shop paig.

Thanks for your help!

It looks fine to me. You can keep the code, I can check easier

To add line between categories, add this code to Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('<span class="breadcrumb-separator" aria-hidden="true">|</span>').insertAfter('li.category-item a');
})
</script>
<style>
  @media screen and (min-width:768px) {
    li.category-item .breadcrumb-separator {
    	display: none !important;
    }
  }
  @media screen and (max-width:767px) {
li.category-item {
    display: flex;
    align-items: center;
}

a.category-link {
    padding-right: 10px !important;
}
  }
</style>