spotonlynne

Hi Paul,

Thank you so much! I will have a go at this. I presume I have to alter the percentage of padding depending on the ratio of the landscape images.

It is important with art that I show the whole image, so I am not sure why Squarespace insist on cropping on a mobile device.

Best regards,
Lynne

Hello,

I have built a website for an artist, who wants to sell his work online. These are mainly paintings and drawings in various sizes, shapes (landscape and portrait). In the store, I have used the Simple layout, which works well when viewing all items or category pages and we are happy for the images to be cropped here to the portrait view you currently see. When you view the individual product pages though, we want to see the whole image (painting or drawing), as that is what people are buying. This works already on a Desktop and iPad, but on a mobile that image is cropped portrait. Squarespace Help tell me this is not possible currently. Is there a way, maybe using code of changing the mobile view of product description page images?

Hope you are able to help, as my coding skills are very basic!

Thank you in advance.

Lynne

PS. I have attached screen prints, so you can see what I mean - it is fine on the Desktop view, but not on the Mobile view. The password is GARFIELD0987$$$$

PLEASE CAN ANYONE HELP AS THE SITE IS LIVE AND NOT DISPLAYING PROPERLY!

See: www.weedwise.co.uk

I had a go at it with following, but neither options worked (although the second set of code did a few weeks ago, not perfectly though). I tried both and still no joy. There must be a way of doing this so that the rule lines up with the bottom of the button in all three cases.

Here is the code I used:

/* Moving rule up on home page text links */

#block-yui_3_17_2_1_1626194606203_93732 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1626194606203_110526 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1630415360095_13134 .sqs-block horizontalrule hr {padding-top: 0px !important}

#block-yui_3_17_2_1_1633945261838_9793 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1633949444703_10177 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1633949444703_18412 .sqs-block-button-element {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626196191825_12171 .sqs.block text {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626194606203_99648 .sqs.block text {padding-bottom: 0px !important}

#block-yui_3_17_2_1_1626194606203_116434 .sqs.block text {padding-bottom: 0px !important}

AND/OR

/* moving lines up on home page links - PC only */

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -42px !important;

}

}

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -42px !important;

}

}

@media only screen and (min-width: 951px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -42px !important;

}

}

/* moving lines up on home page links - tablet only */

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -48px !important;

}

}

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -48px !important;

}

}

@media only screen and (min-width: 640px) and (max-width: 950px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -48px !important;

}

}

/* moving lines up on home page links - mobile only */

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633945261838_9793

{margin-bottom: -56px !important;

}

}

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633949444703_10177

{margin-bottom: -56px !important;

}

}

@media only screen and (max-width: 640px) {

#block-yui_3_17_2_1_1633949444703_18412

{margin-bottom: -56px !important;

}

}

Site URL: https://weedwise.squarespace.com

Hello. Can anyone help me please? I am trying to align some customised buttons and lines on the home page of the following site:

https://weedwise.squarespace.com (pw: W33dw1s3)

There are three sections with button links to other pages, each separated by a line. What I am trying to achieve is for the line below each one to attach itself to the bottom of the button on all devices.

Currently, although I have added some CSS code for mobiles, tablets and desktop, the line still isn't in the right place and moves on different screen sizes.

I have attached two screenprints: one showing what it currently looks like and one with the desired effect. Please ignore the red lines, as they are not required.

Is there a way of using CSS to say that you want the two items to align? I'd really like to get this site live this week and this is really bugging me!

Thank you!

Lynne

On 12/25/2021 at 8:19 AM, tuanphan said:

Try this CSS

header#header, article section:first-child {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

 

Hi @tuanphan,

That didn't actually work for me. However, I have resolved it with this code (so pleased with myself for finally working it out!):

/* Removing spacing on portfolio grid images */

@media only screen and (min-width: 1280px) {

section[data-section-id="60edcca24c056a31b8193704"] {

.portfolio-grid-basic

{padding-right: 0px; padding-left: 0px; padding-bottom: 100px !important;

  }}}

On 9/8/2021 at 1:28 AM, tuanphan said:

Add to Design > Custom CSS

/* Align logo page content - bigger screen */
article .content-wrapper {
    max-width: 100% !important;
}

 

@tuanphan that code made the content go wider to match where the logo currently sits. The designer wants the site width to be 1280 pixels and everything to line up within that width. See image attached. I am wondering if because there is already so much CSS code, something is conflicting? Would you have time to have a look for me please?

This is the code you gave me before:

/* header layout */
@media screen and (min-width:768px) {
.header-announcement-bar-wrapper {
    padding: 0px !important;
}
.header-nav {
    height: 100px !important;
    flex: 60% !important;
    width: 60% !important;
    background-color: #EDEAE2;
    padding-right: 5vw;
}
.header-title {
    width: 40% !important;
    flex: 40% !important;
}
.header-nav-item {
    height: auto !important;
}
.header-nav-wrapper {
    height: 100% !important;
}
nav.header-nav-list {
    height: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header-title-logo a {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5vw;
}
.header-nav-item--active a {
    background-image: none !important;
}
.header-nav-item {
    height: 100% !important;
    vertical-align: middle;
    display: flex;
    align-items: center;
}
.header-nav-item--active:after {
    content: "";
    background-color: #F6FF00;
    display: block;
    width: 10px;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
}
/* nav color */
.header-nav-item a {
    color: #1e2a52 !important;
}
.header-nav-item a:hover {
    color: #727786 !important;
}
.header-nav-folder-item a {
    color: #fff !important;
}
.header-nav-folder-content {
    top: 70px !Important;
}
.header-nav-item {
    position: relative;
}

@bangank36

I have attached an image showing what the graphic designer wants me to achieve on this page. Hopefully you will know what I need to do. I don't know enough about CSS to resolve this.

Thank you!

Lynne

@bangank36 Hi!

No, I want the group of images to line up with the text section above and the text in the image section below. So the page looks the same width all the way down (apart from the main menu bar). At the moment, the section with the project list is narrower. I realise it moves around from screen to screen, but I was hoping there was some way of making it look neater.

Thank you!

Lynne

Site URL: https://weedwise.squarespace.com

Hi,

I have added a portfolio (projects) section to this website and want to use CSS to tidy up the design of the project summary page. In particular, I would like to get rid of the padding around the images, so that they line up with the text above, ie. they fit the full width of the site, which is 1280px.

How do I do this please?

https://weedwise.squarespace.com (pw: W33dw1s3)

Thank you!

Lynne

On 10/1/2021 at 8:20 AM, tuanphan said:

Use this tool https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Thank you! The tool I was using didn't pick up those sections. I've managed to do them all now.

Lynne

On 9/29/2021 at 8:10 AM, tuanphan said:

Add to Design > Custom CSS

/* Equal Contact Page List Items */
@media screen and (min-width:768px) {
.user-items-list-item-container[data-section-id="60edce4d172ba47bdac1ece1"] .list-item-content {
    min-height: 360px;
}
}
/* Grounds managemenet mobile */
@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="60f5783c22602c08ca09c5f2"] .list-item-content__description {
    max-width: 100% !important;
}
}

 

Thank you @tuanphan 🙂 How do I find the data-section-id for the same block on all the service pages (and not just the Grounds Management page)? I could then amend the code so that they all have wider text on a mobile.

Lynne

@tuanphan

Hope you are well. You did offer to help me with some other things on this site - see screenprint attached.

It would make the site look a lot nicer! Thank you so much.

Lynne

Hi @tuanphan

The code didn't work - it moved the content inward but left the logo to the left of it. We need to align the logo with the content, the site width is 1280. I'm not sure what to do.

Thank you!

Lynne

Hi @tuanphan

Align the logo with the content, the site width is 1280.

Lynne

Hi @tuanphan the new code hasn't worked re the logo. That is still moving and on my iMac is left of the main content. See screenprint.

Best regards,
Lynne

Hi @tuanphan Yes, I have attached a screenprint of the site now and also one of the graphic designer's layout, so you can see the difference.

Thank you!
Lynne

Site URL: https://weedwise.squarespace.com

Hello. I am trying to use CSS to change the layout of the footer on the mobile version only. As you can see from the attached image of the desktop version, two sections are ranged right, but all sections are supposed to be ranged left on the mobile. Can anyone tell me what is wrong with this code please? I managed to work out the code for not displaying the spacers on the mobile and also for moving the social media icons to the left, but the last block of text is refusing to range left!

/* range text left on mobile footer */
@media only screen and (max-width:640px) {
#block-yui_3_17_2_1_1629213840697_13069 .sqs-block-content {
text-align: left !important;
}} 

Yes please @tuanphan that would be really helpful.

They would look a lot better if they were spaced better.

Also, the client has asked with the two coloured menu that you helped me with, if the text within it could line up with the rest of the site. The site width is set at 1280px. Currently the logo moves depending on the width of the device, as does the site main menu. The graphic designer would like the menu to range right but only to 1280px. Is this possible to add to the code that you did in the email trail above?

Thank you once again!
Lynne

On 7/29/2021 at 1:39 PM, spotonlynne said:

@tuanphan Thank you so much (again). You are a star 🤩

 

@tuanphan sorry to ask you again, but the client has come back and said they would like the lines below the three snippets of text with the links to sit directly at the bottom of the background behind each text arrow link. I have attached their initial design, so you can see what I am trying to achieve and a screenprint that shows what it looks like at the moment.

They also would like to make the whole background a link to another page and not just the text arrow.

You can see it on the site:

weedwise.squarespace.com (pw: W33dw1s3)

Hope that makes sense and that you are able to advise me again.

Thank you!
Lynne

@tuanphan Thank you so much (again). You are a star 🤩

@tuanphan Yes that is right. Do I need to add in a spacer or three spacers?

@tuanphan sorry this is becoming a hard story for you to follow. But I have now managed to hide the line under the arrow, so the code now reads:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
  .sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

#block-yui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
.sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: center;
.sqs-block-html a {background-image:none!important;}
h1 a, h2 a, h3 a, h4 a, p a {text-decoration: none!important;
  }
}

It is just the alignment on a mobile that is the issue now.

Thanks for bearing with me.

Lynne

Dear @tuanphan

ADDENDUM:

This is the code I have used so far:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background-color: #EDEAE2;
padding: 20px;
text-align: middle;
}

Now, I have an underline under the arrow as it is a link and need to remove it from there only (not other links on the site) and somehow get the text and arrow blocks to become one on a mobile phone.

I am learning (slowly)!

Lynne

I tried to do it by adding this code:

/* background arrow colour */
#block-yui_3_17_2_1_1626194606203_133233 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

#block-ui_3_17_2_1_1626194606203_175210 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

#block-yui_3_17_2_1_1626194606203_201996 .sqs-block-content {
background: background: #EDEAE2;
padding: 0px;
text-align: middle;
}

But nothing has changed - and I guess that would still display the arrow link on the line below in the mobile format?

L

@tuanphan I have added one after each text block and before the arrow. Or did you mean just one block?