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


Circle Member
  • Content Count

  • Joined

  • Last visited

Posts posted by tazmeah

  1. You seem to want this solution because there are an odd number of "projects", but what happens when you have an even number? If you add a solution where "the first project spans two places" then an even number of projects will cause the same problem. 

    The simplest solution is to accept things the way they are.

    The next simplest solution is probably to stack the images in a single column.

    Otherwise, you'll probably have to use a CSS Grid, which is mobile responsive, and triggered by a script, on window resize, if the number of projects is odd.


  2. I don't know how you added those icons to your page, but is there anything native to Ethan that allows you to add a permanent text box to those images? If so, we can try writing code that makes all the text boxes invisible by default, but visible when the icon is hovered over, then invisible again when you're off of it.

  3. Sure. You can use CSS Grid to do that. I made a demo showing you how it works. I have 3 things on a line regardless of the size of the screen. You can change the number of things by changing how many times it says "auto". For instance, "auto auto auto" means 3 things, but "auto auto" means 2 on a row. https://codepen.io/montaz-meah-ii/pen/oNvwObQWithout a link to your site, it's hard for someone to give you a more specific answer, however.You can learn more about CSS Grid in this game: https://cssgridgarden.com/

  4. regarding the above code you wrote, there is an error in that you use "less than OR equal to" on line 4. Delete the equal sign and there will be no error. When I tested your code, the variable "box" is one element. The loop begins where i is 0, since 0 is less than or equal to 1, it changes the padding on box[0] (which is your element). Then i becomes 1. Since 1 is less than or equal to 1, it tries to change the padding of box[1], which doesn't exist. The error says "Cannot read property 'style' of undefined", meaning box[1] is undefined.

  5. I recommend using CSS over Javascript if you're just trying to change the style on that page. To change the style of a div with the classes you mentioned above using CSS, you'd write

    div.newsletter-form-wrapper.newsletter-form-wrapper--layoutFloat.newsletter-form-wrapper--alignCenter {
    /* your properties and values go here*/

    and if you're using code injection, it will have to go inside of style tags instead of script tags. Otherwise, you can just use it without the tags using custom css. The other thing to consider: if you're only experiencing problems when it's in mobile view — meaning, you like the style when it's larger than mobile — you can specify your style to only be your custom code when the screen is the mobile size. To me, your Newspaper section looks fine until it reaches 450px or so. If you agree, you could specify your code like this:

    @media screen and (max-width:450px) {
       div.newsletter-form-wrapper.newsletter-form-wrapper--layoutFloat.newsletter-form-wrapper--alignCenter {
           padding: 0px;

    More information on CSS media queries can be found here. https://www.w3schools.com/css/css3_mediaqueries.asp

  6. Let's say you have a folder called "PETS" and inside it, you have two links to "CATS" and "DOGS". You want the PETS folder to link to a page about Cats and Dogs.

    The easiest solution that will work on both Desktop and Mobile is to make a third link inside your folder and set it as the first link. For example:

    PETS contains the links 1. CATS and DOGS, 2. CATS, 3. DOGS

    On Desktops, hovering over the folder PETS will dropdown the three links. Clicking on PETS will navigate to the first link inside the folder, which is CATS and DOGS.

    On Mobile, clicking PETS will open the folder. Clicking PETS again will close the folder. Clicking "CATS and DOGS" will take you ...you know where it will take you.

    So, just make another link that will take users to where you want the folder to take them, and place that at the top of your folder's navigation.

  7. @vicorstan Consider an iPhone. Did you know that you can touch the very top of the browser window and go back to the top of any webpage from any location on the page? That means there are virtually an infinite # of "Back to top" buttons. If you're in the middle of the page, it's convenient to shoot back to the top without going all the way down first. But it's your site. Keep in mind you won't get much help with a bad attitude. I'm not looking for help; you are.

  8. Login to your Sqaurespace site and select the page you want to edit. Then select that page’s settings and choose Advanced settings. In the Header injection, if you’re wishing to change the text, you add:

    p {
     font-size: 30px;
     color: red;
    h1 {
     font-size: 40px;
     color: #fff;

    You’d benefit more if you provided a link to your site and asked a specific question like: How do I make the font of the third paragraph a size of 22 with a color of purple, underlined, and bold?

  9. What I did on mine was removed all the time using CSS, then manually added time to the ones I wanted.

    .event-time-12hr {display: none !important}

    Then, for the ones that you want time to be shown, put it in the title. Here’s an example:

    Title Goes Here <br> 10:10AM

    You can use HTML br tag in the event title

    The HTML tag <br> is a break which puts the time on a line underneath the Title.

  10. The easiest way is to probably use a Markdown Block instead of a Text Block. Let’s say you have this written in a text block:
    “And here’s to you, Mrs. Robinson, Jesus loves you more than you will know.”

    Paste it into a Markdown Block and surround the part you want to “highlight” with span tags like this:

    "And here's to you, <span style="background-color:green">Mrs. Robinson</span>, Jesus loves you more than you will know."

  11. Oh. I think I misunderstood your question.

    On your page in the bottom-left, you have a block of social icons, a button that says "Visit the Gallery", a button that says "Check out the blog", a "For More Information", and a Horizontal Rule.If you're talking about the vertical spacing between those

    the social block is #block-80066b6609382a56d550the "visit the gallery" is #block-20197bb5824e92342eab"check out the blog" is #block-4abbfaddad961a1ed903info is #block-32bfc8ba8fd6000cf1f8horizontal rule is #block-f5e7d108f6c421065491

    They all are vertically equidistant with a gap of 17pixels. That gap is their "padding".You can adjust them all together, like this:

    #block-80066b6609382a56d550, #block-20197bb5824e92342eab, #block-4abbfaddad961a1ed903, #block-32bfc8ba8fd6000cf1f8, #block-f5e7d108f6c421065491 {
    padding-top: 17px !important;

    or you may adjust their padding-top or padding-bottom individually, like so:

    #block-80066b6609382a56d550 { 
    padding-top: 17px; 
    padding-bottom: 0px;

  12. I agree with scoobie; they look great. Each of your social buttons has a "margin-right" of 10 pixels.This is what they are now:

    .social-facebook, .social-instgram, .social-pinterest, .social-google { margin-right: 10px; }

    Copy the code, go to the page called Lauren and click its Page settings. Select "Advanced" and enter that code. Adjust the "10px" to a smaller number.

  • Create New...