Search the Community
Showing results for tags 'custom-css'.
-
Accordion Help. (It works when it wants to)
Dhowbearcat posted a question in Coding and Customization
Site URL: https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Hello, I have coded accordions for my website and they seem to work for some people and not others. I've been able to recreate the issue where the accordions don't open on google chrome and mobile view via google chrome. I'm not seeing any particular errors in the console that is pointing to this issue. Could anyone see if they are able to recreate this issue in chrome or if they are able to help? https://tulip-ranunculus-xc8d.squarespace.com/build-your-trip Password: "SuperTrip"- 5 replies
-
- 1
-
-
- accordion
- javascript
- (and 2 more)
-
Hi, is there any way I can replace the left / right arrows of my carousel to a set of buttons (similar to the photo attached), on both browser and mobile? (Squarespace 7.1.)
-
Adjust Rotating Banner Fixed Height on Mobile
mackenzieu posted a question in Coding and Customization
Site URL: https://carrot-bronze-bld8.squarespace.com/ Is there a way to adjust the fixed height of my homepage rotating banner just on mobile? I have it set at 100vh which I like for desktop but would like to shorten it up a little for mobile. Thanks! -
Adding description to blog page - HENSON TEMPLATE
Vidali posted a question in Coding and Customization
Site URL: https://www.alanvidali.com/artskrol Hello! I have been using the HANSON theme for a while and I want to add a blog. The only issue is that it does not show a description at the top of the page. Is there a way to add this through HTML customization? Thanks for the support! -
This code gives me three vertically/horizontally responsive columns with equal height and width with buttons aligned. Regardless of difference in length of copy. However, it does not work when attempting to have four columns across. Any ideas of how I can make it work for four columns? Thanks in advance. [your-data-section-id] .sqs-row { display: flex; flex-wrap: wrap; } [your-data-section-id] .sqs-col-4 { background-color: #ebebeb; box-sizing: border-box; display: flex; flex: 1 1 330px; flex-direction: column; margin: 1%; padding: 30px; } [your-data-section-id] .button-block { margin-top: auto; } -
Site URL: https://earthworm-kumquat-252r.squarespace.com/config/settings/site-visibility img { border: 1px solid black; } Password is : cuba.pak1234 Im getting this error.
-
Customizing form field layout and equal widths for desktop only
ysong posted a question in Coding and Customization
Site URL: https://theharper.squarespace.com/ Hi! PW: theharpernyc I'm trying to using custom css to customize the form field. I managed to get the the form fields to be where I want it by using this code: For email & phone number: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}} For unit & budget: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(3), .form-wrapper .field-list>div:nth-child(4) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(3) {margin-right:2%;}} For broker info: div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(5) {margin-right:2%;}} And this is the result: However I am having a hard time trying to get each filed box to be the equal width & spacing like this: Ideally all the field would be equal width and height. Also, how what kind of code would I need to make this layout to be visible on on desktop? Thanks in advance! -
Vertical logo & different navigation style on landing page
ysong posted a question in Coding and Customization
Site URL: https://theharper.squarespace.com/ Hi! PW to site: theharpernyc A couple things I am trying to achieve using custom css that would appear only on the landing page: 1. Logo would be vertical and flush left. Would be responsive to the size of the window. 2. The navigation (will only have two pages linked) would be right above the vertical logo. I was able to flip the logo to it's side using this code: #header .header-title-logo { position: fixed; transform: rotate(90deg); background-color: white; padding:25px; } However I would like to make it full height and flushed left without cutting into the image. This is what I am trying to achieve: If anyone can help point me in the right direction of how to achieve this that would be amazing. Even if it's ideas. Thanks in advance! -
Site URL: http://andrewmorrisphotography.co.uk Hi there, is it possible to change the colour of the logo when the curser hovers over it?
-
Change size of specific image when viewing on mobile
doshea posted a question in Coding and Customization
Hi, I am using the brine template... I want to target and control the size of a specific image when changing between desktop, tablet and mobile. The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile. Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached. website: tbktest.squarespace.com Thanks in advance. Dan. -
Adding comment section and ratings for products
Aashini posted a question in Coding and Customization
Site URL: https://www.frillup.ch/ I am trying to add comment section and ratings for each product on my E commerce. I found something that only allows me to either add ratings or comment box, but not both. I would like some feedbacks from my customers. Can anyone please help me with that? https://www.frillup.ch/ -
How to make this section looks like this
Rayalainbhatti posted a question in Coding and Customization
Site URL: https://earthworm-kumquat-252r.squarespace.com/config/settings I want to create my one section looks like this can anyone help me please .I don't know css as im not programmer please help me with this how i can make this section. My first question is to make section same as picture like in between the photo with background color and typography. My second question is to how to make that static marquee same as i provide in image of header.I don't want animation just to make static marquee. PASSWORD of my site is : cuba.pak1234 -
Site URL: https://www.consyl.fr/ Hi everyone ! Idk why but when I added a page on the header menu it has jumped a line. I'd like to know if there's a CSS code that helps fix that and put back the pages on a signe line (it has room for it). Thanks for your help !! Florent 🙂
-
How do I... custom height of a section?
stephenturner98 posted a question in Coding and Customization
When adding a new section to my website - how can I use custom CSS to make the section smaller in height than the squarespace minimum height? An example of the look I am trying to achieve is attached. Please see the part in the green circle. -
Site URL: http://www.andreaaronica.com Hello everyone, what I'm trying to do is a animated underline hover effect under the pages on my header (squarespace 7.1). The password for my website is: almostready I managed to use this code in my CSS: nav a::after { border-bottom: 1.5px solid #000000; content: ''; display: block; position: relative; top: 0.5px; /* Change the vertical position of the underline */ transition: width 0.35s; width: 0%; } nav a:hover::after, nav .current-menu-item a::after { width: 100%; } And it works just fine even though it takes the page titles slightly up. Not a big deal (But if I can fix also that it would be great). The real problem is with the mobile version. The underline is too wide and it doesn't underline just the text but also the social buttons and the button. The code I used for mobile is: @media (max-width: 979px){ nav a::after { top: 0px; /* Change the vertical position of the underline */ } } but it does absolutely nothing, actually it messes up the desktop version. I really tried every kind of css code I could find but I'm totally stuck. Any help would be appreciated. Thank you in advance.
-
Site URL: https://www.astrida.co/allproducts Hello, I would like to change the font of the product title (currently in Alice gold coloured - H1 which I am using on some other heading too) to Museo Sans (just for the products title). Could anyone help with it? I can't figure out. Also any suggestion for product title font? I am primarly using Alice, Museo Sans font for my site! Thank you so much! I will send the password link directly to you :))
-
Hello Everyone, I have no real experience coding and I want to ensure the image seen on the desktop view is roughly the same size on mobile. How can I do this?
-
Stop text overflow on Poster Image Block responsiveness
JoshuaLipka posted a question in Coding and Customization
Site URL: https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes I've been trying to find the correct fix, but I'm not a CSS whisperer. Maybe one of you can help? When this page is reduced to mobile or table, the text overflow in the Poster Image Block isn't staying within the constraints of the block. How do I fix it so the entire Image Block reduces in size including the text? https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes PW: jldnetrush -
Centering Images on Bottom of Gallery Grid: Simple
TheMatthewsGroup posted a question in Coding and Customization
Site URL: https://innatquarryridge.squarespace.com I'm looking to center the bottom of my gallery blocks site-wide because I don't like the way it looks while left-aligned. I was having trouble figuring out how to accomplish this with custom css and would appreciate some assistance. The screenshot below is on the Facilities page of the website. -
Site URL: https://tmforwomen.squarespace.com/ Hello, I have used the below code to add icons next to a couple of secondary navigation links I have in my header. I would like to change the 'Australia' link to a folder in order to have some drop down options, however when I have tried to do so, the icons get all messed up. Please help and thank you 🙂 .Header-nav--secondary .Header-nav-inner { position: relative; margin-left: 0px!important; a:first-child:before { content: ''; width: 30px; height: 35px; position: absolute; background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/6115de1730ff665c4ccd1a61/1628823064550/trancendental-meditation-for-women-australia-08.jpg); margin-left: -35px; background-size: contain; top: 1px; } a:last-child:before { content: ''; width: 23px; height: 15px; position: absolute; background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/611626f4b2b060229a5c36cd/1628841716883/Australia_30_20_s+%281%29.png); margin-left: -33px; background-size: contain; top: 5px; } } This is my aim (Australia here is a link to another page - I want to change this part to a folder) Australia should be the flag icon. Icons should not be in the drop down.
-
I would like your help please with code to adjust/decrease the size of the email fill form box and submit button (visual attached of desktop and mobile/tablet) located in my footer on version 7.1. The email fill form box and submit button are too large and do not shrink when I try to change button size in Squarespace's built in button size adjustment tool. Thanks so much! -
Site URL: https://grasshopper-sepia-476k.squarespace.com/config/pages Hello everyone, I hope someone can help me. I have a small question related to the product page. I have a white space that appears below my photo gallery. I would like to use it to put some information. (example screenshot) By a customisation or css, is that possible ? Thanks a lot! Gass -
Site URL: https://cobalt-endive-6g42.squarespace.com/ Hi all, I'm trying to figure out how to make three text blocks--arranged side by side--maintain equal height as you resize the browser. I haven't been able to find many posts that address this issue, though I keep seeing "display: flex" brought up as a potential solution. I've been playing around with it for a few days and haven't come up with anything. As you can see in my screen shot, I just want the red part of the other two text blocks to always match the height of the the third one. Simply adding in something like "height: 200px" doesn't work because it's not responsive. Any help would be appreciated! Site Password: 123 -
Site URL: http://www.playtekitchen.com This is all great information! Is there a way to adjust the look of the Mobile Menu so that it does not cover the entire screen once clicked?
-
Site URL: https://thewanderingbison.com/products/sundown-quilt-hand-quilted-sunset-quilt Hi! I have my individual product photos displayed stacked on my desktop/tablet website, but when it switches to mobile it turns them into a slideshow which severely crops the photos. It makes it look really awkward and it doesn't show my product well. Is there some custom code that I can use to make my individual product page photos show up stacked on mobile? Thanks!
