Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


  • Posts

  • Joined

  • Last visited

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Pamela I just tested both the LI and FB links on your page. The former went straight through to your LI profile page no problem. With FB I was required to login prior to getting to your FB page. I was using Firefox in both cases and use FireFox's password manager for LinkedIn and Facebook. I retested using Chrome in private browser mode (so no caching, or the browser "remembering" login credentials) and in both cases I was required to login or register on both sites. From this, my assumption is, that unless these sites can authenticate who you are you need to login/register. My assumtion that this is a security measure to prevent anonymous trolling/harassment. HTH and good luck. Alex
  2. Look for this snippet of css @ about line 14: .ProductItem-details .variant-option select { font-size: 12px; color: rgba(0,0,0,0); } Try changing the font-size: 12px to suit your needs. HTH.
  3. Hello Saadia, I took a quick look at your site (very nice btw). Possibly the easiest way to achieve would be to change this css code: .tweak-footer-show .Footer { display: block; } to: .tweak-footer-show .Footer { display: block; border-top: solid 40px #f98e2b; } However a couple of observations. On the homepage this is a simplied snippet of your html code: <main> <!-- lots of <section> tags with content --> <section id="our-other-websites" class="Index-page" data-collection-id="5b1752c4f950b7f9ddde6e02" data-parallax-id="5b1752c4f950b7f9ddde6e02" data-edit-main-image="Background" </section> <section id="foot-1" class="Index-page" data-collection-id="5b186390562fa7c61bd9a00c" data-parallax-id="5b186390562fa7c61bd9a00c" data-edit-main-image="Background"> <!-- It's this section which renders the orange "border" by having an empty section tag which contains child <divs> which themselves have padding and whitespace attributes to give it it's height and stops it from collapsing, thus producing a border effect </section> <nav class="Index-nav"> <!-- lots of <section> tags with content --> </nav> </main> If there is not a section with an id attribute of "foot-1" then you will get an odd looking homepage and possibly other inconsistancies on other pages. Therefore I would make the following changes to the css: As already suggested change @ line13 on your css: .tweak-footer-show .Footer { display: block; } to: .tweak-footer-show .Footer { display: block; border-top: solid 43px #f98e2b; } and also change @ line 15 #foot-1 { background: #f98e2b; /* currently the orange colored border */ } to #foot-1 { background: #f0f8ff;/* the pale blue color of the rest of the <main> tag */ } If you do this it should result in a consistant look site wide. Hope this is of some help. If you need any clarification let me know.
  4. Happy to take a look but the site is password protected
  5. You are on the right lines I think. Take a look at you css @ line 14(ish): .ProductItem-details .ProductItem-product-price { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin-bottom: 25px; display: block; } changing above code to this (i.e. removing the order declaration (and it's browser vendor prefixes)): .ProductItem-details .ProductItem-product-price { margin-bottom: 25px; display: block; } The result is this: The next thing to do is the re-ordering of the next 3 sections, SELLADO, PIGMENTACIÓN and ENVÍO Having looked at your html code I can see that there are 3 <h4> each followed by hidden <p> and <ul> and <li> tags with additional info. (Very nice accordian effect BTW 🙂 ). In order to change the order of the <h4> tags and it's subsequent other tags, I would suggest wrapping each set of <h4>,<p><ul> and <li> tags in a div. However I just tried this and it breaks the accordian, though if you are happy to tweak the jquery it should work. Alternatively I suppose give an orer value to each <h4>, <p> etc within the parent <div class="sqs-block-content"> tag but this seems somewhat laborious 😞 Good luck!!
  6. Thanks for this. It's as I suspected the parent of the element you want to center has the following css, which creates a "container" with 3 columns of equal width (the bold part of the code snippet) .blog-basic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-column-gap: 30px; grid-row-gap: 100px; grid-auto-rows: min-content; } This results in the layout below. To achieve the layout below, you will need to add to the css the relating to that specific <article> element. This should do the trick: .blog-basic-grid > article { grid-column: 2/3; } However there might be subsequent issues if you were to add additional <article> elements at a later stage. Also the above code snippet might well cascade throughout the whole site, which might not be what you want, so best to check other pages. (I'm not a squarespace expert, so am not familar with the code base) Hope this is of some help. Good luck.
  7. As inspecting the page is disabled this is a bit of a guess but try setting the left and right margins to 0. That might fix it depending on the parent's display properties. Hope this helps and good luck
  8. Nick This can be achieved using css nth-child selectors. I've had a look at the css (I just happened to stumble across this forum, so I'm not familiar with the css squarespace). Look for the following bit of bit of code in your css file @ about line 15 which is currently (I've "bolded" the bit you are interested in): .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1; } It's this bit of code that causes the image to be replaced by the word(s) when you hover. We could just do something like this say: .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1; background:red /* or whatever color you want */ } Problem is that all of the divs will turn red when hovered over so this is where nth-child selectors come in. Immmediately after the declaration (my emphasis): .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:hover .portfolio-text { opacity: 1; } Add the following 4 "bits of new code" (again my emphasis) .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(1):hover .portfolio-text { background:red /* Now only the 1st div that is hovered over will turn red */ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(2):hover .portfolio-text { background:blue/* Now only the 2nd div that is hovered over will turn blue*/ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(3):hover .portfolio-text { background:green/* Now only the 3rd div that is hovered over will turn green*/ } .no-touch .tweak-portfolio-grid-overlay-show-text-after-hover .portfolio-grid-overlay .grid-item:nth-child(4):hover .portfolio-text { background:yellow/* Now only the 4th div that is hovered over will turn yellow*/ } Obviously if you added a fifth or sixth etc new elements then you would have to add additional declarations for these new elements. Also feel free to change my chosen colors to the correct colors 🙂 I avoided using the !important declaration to achieve what you want, because as said I am not familar with the code base and the !important declaration might cause "unintended consequences" elsewhere on your site as it will over-write other declarations within the css. I hope this helps (sorry for the length of the reply and apologies if the language/tone is a tad simplistic - I like explanations that 6yr olds can follow and I tend to assume others do too 🙂 ) Good luck and if you get stuck shout me 🙂
  • Create New...