Jump to content

Mary_DG

Member
  • Posts

    52
  • Joined

  • Last visited

Everything posted by Mary_DG

  1. Hi Tuanphan, I added it to the CSS but it didn't seem to work. There is still space before the "*".
  2. Hi, this was resolved by adding on CSS /**Spanish logo**/ body.body-es header#header img { content: url(spanishlogo.jpg); }
  3. Hello, I am trying to remove the "space" before the asterisk on required fields on my form. Is there a code available to do that. Help much appreciated. Thank you,
  4. Thanks, Tuanphan. but by adding it to the footer will it not appear on other pages too? If you can provide me the Jquery code, I can try it out and get back to you. As always thank you for your help.
  5. Hello, related to this topic about adding a section on squarespace blog page. I need to add a form below the blog links on every blog page but I don't have a way to add a section. The form is the same format that I have on every other page on this site: www.hellocinnamon.com I need to add the same form format to the individual blog pages.
  6. Hello Tuanphan, I had removed the caption since it will showing too small. I had placed it in the image itself as a work around. The problem I am facing now is that I need the image to bleed on the sides in mobile. Everything is perfect on desktop. But on mobile, since I placed the caption inside the image itself I need the image to be as big as possible and right now it is small and in the middle. Anyway to increase the size of the image to match the first profile image on mobile: https://www.hellocinnamon.com/en/meet-seema
  7. Hello everyone, I added a code (thank you Brad) to display EN only and ES only depending on the language selected. I however have a code to display the header with the logo in the middle and split the menu items on the side. www.hellocinnamon.com I created duplicate for each page in ES language . Can anybody help with the having the logo in ES to display in ES pages only. Below is the code I use for the split navigation: /* =================================== SPLIT NAVIGATION STYLING =================================== */ @splitAfterItem: 4; @actionSize: 1px; @logoSpacing: 1vw; //Width at which nav will stack @media screen and (min-width:1200px) { //Dynamic Nav font size #header .header-nav-item { font-size: clamp(8px,calc(~".6vw + 5px"),18px); } //Split Structure #header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper { display: grid; grid-template-columns:1fr auto 1fr; .header-nav,.header-title { grid-row-start: 1; } .header-nav { margin-top: 0; } .header-nav-item a { opacity: 0; transform: none!important; transition: opacity .3s linear; } &.has-nav .header-nav-item a{opacity:1!important;} .header-title{grid-column-start:2;} @splitOne: @splitAfterItem + 1; .header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;} .header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;} //Left side nav .header-nav:first-child { display: block; text-align: right; margin-right: @logoSpacing; .header-nav-list { justify-content: flex-end; } } //Right side nav .header-nav:not(:first-child) { text-align: left; margin-left: @logoSpacing; .header-nav-list{justify-content:flex-start;} }}} //Give nav more width #header .header-layout-branding-center-nav-center .header-display-desktop { .header-title-nav-wrapper { flex: 0 0 calc(~"100% - @{actionSize} * 2"); } .header-actions{ width:@actionSize; flex: 0 1 @actionSize; max-width: @actionSize; } //hide left side nav when stacked .header-nav:first-child { display: none; } } .header-title-logo a { max-height: unset !important; } /* =================================== end SPLIT NAVIGATION STYLING =================================== */ and this is the code I have for the English/Espanol language switch. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.6.0/css/flag-icon.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { /* SETUP MULTI-LANGUAGE */ var defaultLanguage = 'en'; var lang = location.pathname.split("/")[1]; var defaultClass = 'lang-'+defaultLanguage+''; var itemParent = "nav [class*='collection'],nav [class*='folder'],nav [class*='index'],nav [class*='group']"; if (lang == "" || lang.length > 2 ){ var lang = defaultLanguage; } /* ADD LANGUAGE CLASSES */ $('a[href="/"]').addClass('lang-'+defaultLanguage+'').parents(itemParent).addClass('lang-'+defaultLanguage+''); $('nav a:link:not([href^="http://"]):not([href^="https://"])').each(function () { var langType = $(this).attr('href').split("/")[1]; var multiLanguageClass = 'multilanguage lang-' + langType + ''; if (undefined !== langType && langType.length <= 2) $(this).addClass(multiLanguageClass).parents(itemParent).addClass(multiLanguageClass); }); $('nav button').each(function () { var langTypeFolder = $(this).attr('data-controller-folder-toggle').split("/")[0]; var multiLanguageClass = 'multilanguage lang-' + langTypeFolder + ''; if (undefined !== langTypeFolder && langTypeFolder.length <= 2) $(this).addClass(multiLanguageClass); }); /* HOMEPAGE-LOGO LINKS TO PROPER LANGUAGE HOMEPAGE */ if (lang == "es") { $('a[href="/"]').attr("href", "/es/inicio/"); } /* ADD EXCLUSION NAV ITEMS */ $('.exclude-me,.exclude-me a').addClass('exclude'); $('.sqs-svg-icon--list a,.SocialLinks-link,.header-menu-controls-control').addClass('exclude'); /* REMOVE OTHER LANGUAGES AND KEEP EXCLUDED ITEMS */ $('.multilanguage:not(".lang-'+lang+',.exclude")').remove(); /* SETUP LANGUAGE SWITCHER */ $('body').prepend('<div class="language"><a href="/en/home" class="lang-en"><span class="flag-icon flag-icon-us"></span></a> <a href="/es/inicio/" class="lang-es"><span class="flag-icon flag-icon-mx"></span></a></div>'); }); </script> Appreciate everybody who can help. Thank you in advance.
  8. Hello Tuanphan, here is the link: https://www.hellocinnamon.com/en/meet-seema
  9. Thank you Melody495. I switched to Grid:Simple and it looks better on mobile. So not going to use Load More for now. If you do get a chance to work on the code without the use of a plugin, that would be super. Appreciate you.
  10. Hello, I added this code to decrease the blank spaces of the gallery slide show in mobile: /* Mobile Slideshow Gap */ @media screen and (max-width:767px) { .gallery-slideshow { margin: 0 !important; padding-top: 0 !important; } .fe-6490c89f2289d0d04a66ffeb { row-gap: 0 !important; } .gallery-slideshow { height: 30vh !important; } } @media screen and (max-width:767px) { .gallery-masonry .gallery-masonry-item[data-loaded] img { width:100% !important } } But the caption is gone from mobile. Need help getting the caption back on mobile with minimal spaces between the image and the caption text. Thank you in advance.
  11. Hi, I have a page where I have added a section with image gallery type Grid: Masonry On desktop, looks good. But on mobile all of the images are there on scrolling. Anyway to add a "Load More" button after the first two images just like this reference site (made in wix) https://www.zerofoxbne.com.au/ Thank you so much in advance.
  12. Thanks, Tuanphan, we had to later remove it since it was cost-restrictive. Appreciate your response.
  13. Hello Tuanphan, I don't know how to move the weglot button to the right just below the last menu item (REACH OUT). Website: www.hellocinnamon.com Currently, I am split navigation code that allows divided menu items with the logo in the middle. =================================== SPLIT NAVIGATION STYLING =================================== */ @splitAfterItem: 4; @actionSize: 1px; @logoSpacing: 1vw; //Width at which nav will stack @media screen and (min-width:1200px) { //Dynamic Nav font size #header .header-nav-item { font-size: clamp(8px,calc(~".6vw + 5px"),18px); } //Split Structure #header .header-layout-branding-center-nav-center .header-display-desktop .header-title-nav-wrapper { display: grid; grid-template-columns:1fr auto 1fr; .header-nav,.header-title { grid-row-start: 1; } .header-nav { margin-top: 0; } .header-nav-item a { opacity: 0; transform: none!important; transition: opacity .3s linear; } &.has-nav .header-nav-item a{opacity:1!important;} .header-title{grid-column-start:2;} @splitOne: @splitAfterItem + 1; .header-nav:first-child .header-nav-list > div:nth-child(n +@{splitOne}) {display: none;} .header-nav:not(:first-child) .header-nav-list > div:nth-child(-n +@{splitAfterItem}){display:none;} //Left side nav .header-nav:first-child { display: block; text-align: right; margin-right: @logoSpacing; .header-nav-list { justify-content: flex-end; } } //Right side nav .header-nav:not(:first-child) { text-align: left; margin-left: @logoSpacing; .header-nav-list{justify-content:flex-start;} }}} //Give nav more width #header .header-layout-branding-center-nav-center .header-display-desktop { .header-title-nav-wrapper { flex: 0 0 calc(~"100% - @{actionSize} * 2"); } .header-actions{ width:@actionSize; flex: 0 1 @actionSize; max-width: @actionSize; } //hide left side nav when stacked .header-nav:first-child { display: none; } } .header-title-logo a { max-height: unset !important; } /* =================================== end SPLIT NAVIGATION STYLING =================================== */ Thanks in advance.
  14. Thank you again, Tuanphan, it worked great on hellocinnamon.com site. It is perfect. But I tried using the same code in our other website: www.aelo.ai slideshow:simple gallery and it is not working. see screenshot below. Should i be using a different code?
  15. Hello @tuanphan thank you for checking, we have moved ahead from the design. I appreciate you attempt on the matter. Cheers!
  16. https://www.hellocinnamon.com/start-of-a-journey Thank you in advance.
  17. Hello @tuanphan hope you can get back to me. Also, On The Start of a Journey page, the album looks okay when the phone is held in portrait mode. But when the phone is turned into landscape mode, instead of the images on the album looking larger, they become extremely tiny. Any way for the image to respond to landscape mode?
  18. Hi Tuanphan, yes, please. I am still using 30vh until i have code that will decrease the space between the image and caption. Thank you.
  19. Thank you @tuanphan I did it with 45vh. Is there anyway to decrease the space between the caption and the image:
  20. @tuanphan thank you, I tried this but it is giving me downward scroll arrow to scroll down the page, I was hoping to get the round dot indicator on carousel, like below sample.
  21. @tuanphan hello, thank you I tried this and it removed the space on top. Which is great, but it removed the caption on mobile:
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.