-
Posts
77 -
Joined
-
Last visited
spotonlynne's Achievements
-
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$$$$
-
Aligning buttons and line blocks vertically
spotonlynne replied to spotonlynne's topic in Customize with code
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; } } -
tuanphan reacted to a post in a topic: Portfolio page summary - image alignment
-
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
-
Portfolio page summary - image alignment
spotonlynne replied to spotonlynne's topic in Customize with code
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; }}} -
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
@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; } -
Portfolio page summary - image alignment
spotonlynne replied to spotonlynne's topic in Customize with code
@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 -
Portfolio page summary - image alignment
spotonlynne replied to spotonlynne's topic in Customize with code
@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 -
Beyondspace reacted to a post in a topic: Portfolio page summary - image alignment
-
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
-
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
Thank you! The tool I was using didn't pick up those sections. I've managed to do them all now. Lynne -
spotonlynne reacted to a post in a topic: Two coloured menu bar - is this possible?
-
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
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 -
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
@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 -
spotonlynne reacted to a post in a topic: Two coloured menu bar - is this possible?
-
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
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 -
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
Hi @tuanphan Align the logo with the content, the site width is 1280. Lynne -
Two coloured menu bar - is this possible?
spotonlynne replied to spotonlynne's topic in Site Design & Styles
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