Jump to content

Leah007

Member
 View Profile  See their activity

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by Leah007

    Images side by side on mobile

    in Customize with code

    Posted

    @tuanphan hmm in working on it a little bit further, I don't think putting the image in markdown will work for what I'm trying to do, as I want the image itself to be an active link to another page. If I place the image in markdown then I haven't been able to make it a working link, as it seems the "link" slot for the image is used up by the link to the image url itself.

    Do you have any suggestions for me please? Thanks so much!!

    Images side by side on mobile

    in Customize with code

    Posted

    @tuanphan I didn't know that you could do that thank you!! I've done it for the first two images (shop clothing and shop accessories) but now Squarespace is doing this thing where, when two markdown blocks are right next to each other, it auto merges them into a single markdown block, so I haven't done the last two yet. Would this get in the way of coding them to display side by side?

    Previously, to get around this issue, I've added spacer blocks in between each markdown block and then used display: none to hide the space from showing on desktop views (they already don't show on mobile as far I know). Would this still allow me to code each block into columns??

    Thanks again for all your help, you're really a lifesaver

    Site as it is now: https://www.nuligoods.com/

    Having the mobile menu slide in on the left side of my site.

    in Customize with code

    Posted

    I joined them all thank you for the recommendation!

    And if anyone who is facing the same issue reads this, I ended up doing a workaround kind of cheat where I just reduced the width of the slide out menu so that it didn't get as far as my logo. Since my menu nav items are short titles anyways so they don't take up much vertical space it achieved the look I was going for without any further coding 🙂

    image.thumb.png.aae627623a8099f9c273eb871ee8e133.png

    Images side by side on mobile

    in Customize with code

    Posted

    Hi @tuanphan thank you for that, it worked perfectly on that specific page, however I've since updated my home page and when I tried to replicate that code (with updating the section id) it no longer works.

    This is my current home page: https://www.nuligoods.com/

    I'd still like to have each image in columns of 2 on mobile, ideally with the small line of text underneath still placed underneath (but if this isn't possible I'd settle for just the images in columns!)

    Would you be able to help still?

    Thank you so much you really are a life saver!

    Images side by side on mobile

    in Customize with code

    Posted

    Hi Tuan thank you for that, it worked perfectly on that specific page, however I've since updated my home page and when I tried to replicate that code (with updating the section id) it no longer works.

    This is my current home page: https://www.nuligoods.com/

    I'd still like to have each image in columns of 2 on mobile, ideally with the small line of text underneath still placed underneath (but if this isn't possible I'd settle for just the images in columns!)

    Would you be able to help still?

    Thank you so much you really are a life saver!

    Images side by side on mobile

    in Customize with code

    Posted

    On 12/14/2020 at 7:53 AM, TOMweb said:

    Add to Design > Custom CSS 

    

@media screen and (max-width:767px) {
div#page-section-YOURSECTIONID>.row>.col>.row>.col {
    width: 50% !important;
    float: left !important;
}
}

    🙂

    Hi! I'm trying to do the same thing on my side, but my images are all still in 1 single column when on mobile, just smaller when I use this code. The link is https://www.nuligoods.com/about-1

    This is the code I'm using:

    @media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row {
        display: float;
        justify-content: space-between;
        align-items: center;
        width: 50% !important;
      float: left;
    }}
    @media screen and (max-width:767px) { div#page-section-603dd0a5df73097abcd0eda4>.row>.col>.row>.col {
        width: 50% !important;
        float: left !important;
    }}

    Any help is so appreciated!

    @tuanphan

    Footer text block on Mobile

    in Customize with code

    Posted

    On 1/21/2021 at 10:40 AM, Leah007 said:

     

     

    Hi Tuan! Sorry now I didn't see the notification for a while. If you can still help me that would be amazing! My site url is https://www.nuligoods.com/

    I currently have each pair of text (contact/FAQ, shipping/returns, etc) setup as seperate columns of texts and I love how it looks on desktop. I just can't figure out how how to set it up for mobile so two of the text blocks will fit side by side.  

    I'd like it to look like:

    1380388686_Desiredlayout.jpg.bcdf3ee68dc787e8303410f604c7035b.jpg

     

    Instead of the current footer layout below:

    983358991_currentlayout.jpg.1bb139a8fe5b303af74015fe4a9cc0a9.jpg

     

    Thank you so much!!

     

    @tuanphan this is what I'm desperate for help on. Thanks so much in advance!

    Footer text block on Mobile

    in Customize with code

    Posted

    On 9/30/2020 at 8:12 AM, tuanphan said:

    It seems you solved. Do you still need help on this?

     

    On 5/5/2020 at 5:05 AM, tuanphan said: 
    
h1 {
	font-family: monospace;
}
h2 {
	font-family: proxima-nova;
}
p {
	font-family: futura-pt;
}

    Do similar for other elements

     

    On 1/12/2021 at 5:59 PM, tuanphan said:

    Sorry, I don't see the notification

    You want, on mobile

    Logo

    Column 1. ..............Column 2

    Contact .................Instagram

    FAQ...........................Pinterest

    Shipping................Text

    Returns

    Is this right?

    Hi Tuan! Sorry now I didn't see the notification for a while. If you can still help me that would be amazing! My site url is https://www.nuligoods.com/

    I currently have each pair of text (contact/FAQ, shipping/returns, etc) setup as seperate columns of texts and I love how it looks on desktop. I just can't figure out how how to set it up for mobile so two of the text blocks will fit side by side.  

    I'd like it to look like:

    1380388686_Desiredlayout.jpg.bcdf3ee68dc787e8303410f604c7035b.jpg

     

    Instead of the current footer layout below:

    983358991_currentlayout.jpg.1bb139a8fe5b303af74015fe4a9cc0a9.jpg

     

    Thank you so much!!

     

    Footer text block on Mobile

    in Customize with code

    Posted

    On 9/24/2020 at 7:59 PM, tuanphan said:

    Add to Home > Design > Custom CSS 

    
/* footer links side by side */
@media screen and (max-width:767px) {
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f5a8ef3230b5552772b0d6d .span-12>.row>.span-3 {
    clear: left;
}
}

     

    Hi Tuan really hoping you can help me with almost the exact same thing! My site is https://www.nuligoods.com/ and I am trying to have columns in my footer as well. On desktop it looks just how I want it to:

    image.thumb.png.273425125e64bd616172fbf62a390289.png

     

    But on mobile it stacks it like this:

    image.png.48740169291bb18e0043b12cb36ad923.png

     

    I'm trying to make it like this, with my four sections of text in two columns:

    image.png.0344a2323299b418e634898416a640be.png

    I so appreciate any help you can give I've tried so many things but I can't get it to work!!

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources