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

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

@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

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

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

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

@tuanphan thank you so very much for all your help. It is much appreciated. I need to learn to code!

@tuanphan just realised the yellow link line does appear on the folder if viewing one of the pages within it, but not on the other menu items that are not in folders.

@tuanphan I forgot to attach the image! Here you go.

@tuanphan you are brilliant, thank you! It is not quite there though. The yellow line that is supposed to display in the menu on the active page has disappeared and there is now a small yellow block in the middle of the menu bar. See attached. Would you have another look please. So sorry to take up so much of your time. Lynne The code I have in total is: /* header layout */ @media screen and (min-width:768px) { .header-announcement-bar-wrapper { padding: 0px !important; } .header-nav { height: 97px !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: #fff !important; } .header-nav-folder-item a { color: #fff !important; } .header-nav-folder-content { top: 70px !Important; }

@tuanphan I have just noticed that the dropdown menus on Services and Our Company are now sitting over the top of this menu bar and now below the folder name. Not sure how to fix this. L

Gosh that is brilliant @tuanphan thank you. I just need to make the text in that grey section blue (#1E2A52). Would you be able to help me with that too please? Lynne

Site URL: https://weedwise.squarespace.com Hi. I have been asked by a designer to create a site where the menu at the top has two different background colours. One for the logo and a second for the navigation. The active page would have a yellow line underneath. I have attached a screenshot. Does anyone know how I can achieve this please? I am not a coder. Thank you! Lynne Pw: W33dw1s3

Hi. I am trying to do exactly the same thing with a site I am creating. Where do I find the collection id class for my blog. The site is https://heseltinegallery.squarespace.com (pw: michael) and the blog page I want the dates not to show on is Meet the Committee. Any help would be greatly appreciated. Thank you. Lynne