tuanphan

Hi, Can you share link to page where you use newsletter? We can help easier

I used to do this for a site. This is possible with almost buttons (with form/newsletter button, it is a bit complex). If you share link to your site, we can give code for your case.

Use this CSS code /* Dropdown items space */ .header-nav-folder-item { margin-bottom: 40px; }

Add to Settings > Developer Tools > Code Injection > Header <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous"> <style> /* hide current link icons */ a.sqs-svg-icon--wrapper.url[href*="tiktok"] { visibility: hidden; } /* add tiktok */ a.sqs-svg-icon--wrapper.url[href*="tiktok"]:before { content: "\e07b"; visibility: visible; font-family: "Font Awesome 5 Brands"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; background: black; width: 28px; height: 28px; color: white; line-height: 28px; } </style> If it doesn't work, please keep the first line, then we can check it again easier

Save & check in Live mode or incognito window (don't login). Recently there is a problem with code in edit mode

You mean when clicking this button?

You can share link to page where you want to add a background image, we can give the code

Can you send all current code in Code Injection?

Images look fine to me. Or you mean image not align inside section?

Hi, Can you share link to this page? We can check easier

Hi, This is possible. Can you share link to gallery page? We can check easier

Can you send desired layout of the popup? We can code it easier

You can edit each project item > Add a Code Block (anywhere on page) > Use this code <style> article section:first-child .content-wrapper:after, article section:first-child .content-wrapper:before { content: "enter text 1"; position: absolute; bottom: 50px; color: white; left: 3vw; z-index: 999999; } article section:first-child .content-wrapper:before { content: "enter second text"; right: 3vw; left: unset; } </style>

If you still have problem, we can use some lines of code to adjust layout on mobile only

Did you solve or still need help?

Use this to Custom CSS box /* Homepage - Mobile - Slideshow */ @media screen and (max-width:767px) { body.homepage .gallery-fullscreen-slideshow { height: 30vh !important; } }

Can you share site url? We can check easier

If you share link to page where you have problem, we can help easier

I think you can add a Video Block, then we can try use CSS code to make it to background video

Hi, Can you share link to a blog post? We can check problem easier

Can you share link to gallery? We can check problem easier Hi, Center and appear when hovering or always appear?

#1. You mean you need to add Gallery Block on a standard page, not blog post? #2. I don't know this

#Style 15 First, you need to setup Grid to 3 columns Next use CSS code div#gridThumbs { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(̉̉60,minmax(0,0.2fr)) !important; } .portfolio-grid-overlay .grid-item { padding-bottom: 0 !important; height: 100%; } .portfolio-grid-overlay .grid-item .grid-image { position: static; } a.grid-item:nth-child(1) { grid-column: ~"1 / 4" !important; grid-row: ~"1 / 3" !important; } a.grid-item:nth-child(2) { grid-column: ~"1 / 2" !important; grid-row: ~"3 / 6" !important; } a.grid-item:nth-child(3) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(4) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(5) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(6) { grid-column: ~"1 / 4" !important; grid-row: ~"6 / 8" !important; } a.grid-item:nth-child(7) { grid-column: ~"1 / 2" !important; grid-row: ~"8 / 11" !important; } a.grid-item:nth-child(8) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(9) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(10) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(11) { grid-column: ~"1 / 4" !important; grid-row: ~"11 / 13" !important; } a.grid-item:nth-child(12) { grid-column: ~"1 / 2" !important; grid-row: ~"13 / 16" !important; } a.grid-item:nth-child(13) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(14) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(15) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(16) { grid-column: ~"1 / 4" !important; grid-row: ~"16 / 18" !important; } a.grid-item:nth-child(17) { grid-column: ~"1 / 2" !important; grid-row: ~"18 / 21" !important; } a.grid-item:nth-child(18) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(19) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(20) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(21) { grid-column: ~"1 / 4" !important; grid-row: ~"21 / 23" !important; } a.grid-item:nth-child(22) { grid-column: ~"1 / 2" !important; grid-row: ~"23 / 26" !important; } a.grid-item:nth-child(23) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(24) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(25) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(26) { grid-column: ~"1 / 4" !important; grid-row: ~"26 / 28" !important; } a.grid-item:nth-child(27) { grid-column: ~"1 / 2" !important; grid-row: ~"28 / 31" !important; } a.grid-item:nth-child(28) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(29) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(30) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(31) { grid-column: ~"1 / 4" !important; grid-row: ~"31 / 33" !important; } a.grid-item:nth-child(32) { grid-column: ~"1 / 2" !important; grid-row: ~"33 / 36" !important; } a.grid-item:nth-child(33) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(34) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(35) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(36) { grid-column: ~"1 / 4" !important; grid-row: ~"36 / 38" !important; } a.grid-item:nth-child(37) { grid-column: ~"1 / 2" !important; grid-row: ~"38 / 41" !important; } a.grid-item:nth-child(38) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(39) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(40) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(41) { grid-column: ~"1 / 4" !important; grid-row: ~"41 / 43" !important; } a.grid-item:nth-child(42) { grid-column: ~"1 / 2" !important; grid-row: ~"43 / 46" !important; } a.grid-item:nth-child(43) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(44) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(45) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(46) { grid-column: ~"1 / 4" !important; grid-row: ~"46 / 48" !important; } a.grid-item:nth-child(47) { grid-column: ~"1 / 2" !important; grid-row: ~"48 / 51" !important; } a.grid-item:nth-child(48) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(49) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(50) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(51) { grid-column: ~"1 / 4" !important; grid-row: ~"51 / 53" !important; } a.grid-item:nth-child(52) { grid-column: ~"1 / 2" !important; grid-row: ~"53 / 56" !important; } a.grid-item:nth-child(53) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(54) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(55) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(56) { grid-column: ~"1 / 4" !important; grid-row: ~"56 / 58" !important; } a.grid-item:nth-child(57) { grid-column: ~"1 / 2" !important; grid-row: ~"58 / 61" !important; } a.grid-item:nth-child(58) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(59) { grid-column: ~"2 / 4" !important; } a.grid-item:nth-child(60) { grid-column: ~"2 / 4" !important; } #Style 16. First, you need to setup Grid to 4 columns, then use CSS code div#gridThumbs { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(36,minmax(0,0.2fr)) !important; } .portfolio-grid-overlay .grid-item { padding-bottom: 0 !important; height: 100%; } .portfolio-grid-overlay .grid-item .grid-image { position: static; } a.grid-item:nth-child(5n+1) { grid-column: ~"1 / 3" !important; } a.grid-item:nth-child(5n+2) { grid-column: ~"3 / 5" !important; } a.grid-item:nth-child(5n+4) { grid-column: ~"2 / 5" !important; } a.grid-item:nth-child(5n) { grid-column: ~"1 / 5" !important; } #Style 17. First, you need to setup Grid to 2 columns, then use CSS code div#gridThumbs { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(60,minmax(0,0.2fr)) !important; } .portfolio-grid-overlay .grid-item { padding-bottom: 0 !important; height: 100%; } .portfolio-grid-overlay .grid-item .grid-image { position: static; } a.grid-item:nth-child(3) { grid-column: ~"1 / 3" !important; grid-row: ~"2 / 4" !important; } a.grid-item:nth-child(5) { grid-column: ~"2 / 3" !important; grid-row: ~"4 / 6" !important; } a.grid-item:nth-child(7) { grid-column: ~"1 / 3" !important; grid-row: ~"6 / 8" !important; } a.grid-item:nth-child(10) { grid-column: ~"1 / 3" !important; grid-row: ~"9 / 11" !important; } a.grid-item:nth-child(12) { grid-column: ~"2 / 3" !important; grid-row: ~"11 / 13" !important; } a.grid-item:nth-child(14) { grid-column: ~"1 / 3" !important; grid-row: ~"13 / 15" !important; } a.grid-item:nth-child(17) { grid-column: ~"1 / 3" !important; grid-row: ~"16 / 18" !important; } a.grid-item:nth-child(19) { grid-column: ~"2 / 3" !important; grid-row: ~"18 / 20" !important; } a.grid-item:nth-child(21) { grid-column: ~"1 / 3" !important; grid-row: ~"20 / 22" !important; } a.grid-item:nth-child(24) { grid-column: ~"1 / 3" !important; grid-row: ~"23 / 25" !important; } a.grid-item:nth-child(26) { grid-column: ~"2 / 3" !important; grid-row: ~"25 / 27" !important; } a.grid-item:nth-child(28) { grid-column: ~"1 / 3" !important; grid-row: ~"27 / 29" !important; } a.grid-item:nth-child(31) { grid-column: ~"1 / 3" !important; grid-row: ~"30 / 32" !important; } a.grid-item:nth-child(33) { grid-column: ~"2 / 3" !important; grid-row: ~"32 / 34" !important; } a.grid-item:nth-child(35) { grid-column: ~"1 / 3" !important; grid-row: ~"34 / 36" !important; } a.grid-item:nth-child(38) { grid-column: ~"1 / 3" !important; grid-row: ~"37 / 39" !important; } a.grid-item:nth-child(40) { grid-column: ~"2 / 3" !important; grid-row: ~"39 / 41" !important; } a.grid-item:nth-child(42) { grid-column: ~"1 / 3" !important; grid-row: ~"41 / 43" !important; } a.grid-item:nth-child(45) { grid-column: ~"1 / 3" !important; grid-row: ~"44 / 46" !important; } a.grid-item:nth-child(47) { grid-column: ~"2 / 3" !important; grid-row: ~"46 / 48" !important; } a.grid-item:nth-child(49) { grid-column: ~"1 / 3" !important; grid-row: ~"48 / 50" !important; } a.grid-item:nth-child(52) { grid-column: ~"1 / 3" !important; grid-row: ~"51 / 53" !important; } a.grid-item:nth-child(54) { grid-column: ~"2 / 3" !important; grid-row: ~"53 / 55" !important; } a.grid-item:nth-child(56) { grid-column: ~"1 / 3" !important; grid-row: ~"55 / 57" !important; } a.grid-item:nth-child(59) { grid-column: ~"1 / 3" !important; grid-row: ~"58 / 60" !important; } #Style 18. First you need to setup Grid to 3 columns, then use CSS code div#gridThumbs { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(36,minmax(0,0.5fr)) !important; } .portfolio-grid-overlay .grid-item { padding-bottom: 0 !important; height: 100%; } .portfolio-grid-overlay .grid-item .grid-image { position: static; } a.grid-item:nth-child(4n+1) { grid-column: ~"1 / 3" !important; } a.grid-item:nth-child(2) { grid-column: ~"3 / 4" !important; grid-row: ~"1 / 3" !important; } a.grid-item:nth-child(6) { grid-column: ~"3 / 4" !important; grid-row: ~"3 / 5" !important; } a.grid-item:nth-child(10) { grid-column: ~"3 / 4" !important; grid-row: ~"5 / 7" !important; } a.grid-item:nth-child(14) { grid-column: ~"3 / 4" !important; grid-row: ~"7 / 9" !important; } a.grid-item:nth-child(18) { grid-column: ~"3 / 4" !important; grid-row: ~"9 / 11" !important; } a.grid-item:nth-child(22) { grid-column: ~"3 / 4" !important; grid-row: ~"11 / 13" !important; } a.grid-item:nth-child(26) { grid-column: ~"3 / 4" !important; grid-row: ~"13 / 15" !important; } a.grid-item:nth-child(30) { grid-column: ~"3 / 4" !important; grid-row: ~"15 / 17" !important; } a.grid-item:nth-child(34) { grid-column: ~"3 / 4" !important; grid-row: ~"17 / 19" !important; } a.grid-item:nth-child(38) { grid-column: ~"3 / 4" !important; grid-row: ~"19 / 21" !important; } a.grid-item:nth-child(42) { grid-column: ~"3 / 4" !important; grid-row: ~"21 / 23" !important; } a.grid-item:nth-child(46) { grid-column: ~"3 / 4" !important; grid-row: ~"23 / 25" !important; } a.grid-item:nth-child(50) { grid-column: ~"3 / 4" !important; grid-row: ~"25 / 27" !important; } a.grid-item:nth-child(54) { grid-column: ~"3 / 4" !important; grid-row: ~"27 / 29" !important; } a.grid-item:nth-child(58) { grid-column: ~"3 / 4" !important; grid-row: ~"29 / 31" !important; }

The site is private. Can you setup an access password? We can access easier https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

Use this code to Design > Custom CSS or Website > Website Tools > Custom CSS /* Fluid Engine Stacked */ @media screen and (max-width:767px) { .fe-62f27edd36f56172b4650d13>div { grid-area: unset !important; display: block !important; width: 100% !important; margin-bottom: 20px; } .fe-62f27edd36f56172b4650d13 { display: block !important; padding-left: 6vw; padding-right: 6vw; } .fe-62f27edd36f56172b4650d13 .sqs-block-image .design-layout-fluid * { position: relative !important; } .fe-62f27edd36f56172b4650d13>div:not(:first-child) { width: 50% !important; float: left !important; } .fe-62f27edd36f56172b4650d13>div:nth-child(2n+4) { clear: left !important; } }