Jump to content

Help with logo size in footer

Recommended Posts

  • Replies 12
  • Views 2.3k
  • 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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
  • 2 months later...

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

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment

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>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.