Jump to content

How to resize code block?

Recommended Posts

  • Replies 5
  • Views 1.5k
  • Created
  • Last Reply
Posted
On 7/2/2021 at 4:15 PM, hcyf said:

Site URL: http://www.spadesroom.com/welcome

Used a code block to make the welcome screen for my site, the desktop sizing is fine but how do I make the sizing of the block on the mobile site smaller ?

photo_2021-07-02_17-14-07.jpg

Add to Design > Custom CSS

/* Mobile resize code block */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1622194316785_3328 {
    width: 50%;
    margin: 0 auto;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...
Posted

@tuanphan, would you have any ideas on how to solve this question? 

https://community.adobe.com/t5/adobe-xd/adobexd-sharing-prototype-link-on-squarespace-website/m-p/12321993/thread-id/54287

my website: https://pelican-snail-erg5.squarespace.com/

--

Hi, 

I'm having an issue with resizing the prototype link on my Squarespace website.  Currently, it is too large for anyone to effectively click-through, you have to scroll up and down to view the whole prototype.

Screen Shot 2021-08-17 at 5.36.14 AM.pngexpand image

 

I tried using this custom CSS, 

div#block-yui_3_17_2_1_1628389713241_45661 iframe {
overflow:hidden;
height:75%;
width:75%;
}

But this makes the prototype mini. 

Screen Shot 2021-08-17 at 5.34.18 AM.pngexpand image

I also tried, 

div#block-yui_3_17_2_1_1628389713241_45661 {
  width: 50%;
  margin: 0 auto;
}

And this doesn't have any effect on it.

 

Posted
19 hours ago, zzlogan said:

@tuanphan, would you have any ideas on how to solve this question? 

https://community.adobe.com/t5/adobe-xd/adobexd-sharing-prototype-link-on-squarespace-website/m-p/12321993/thread-id/54287

my website: https://pelican-snail-erg5.squarespace.com/

--

Hi, 

I'm having an issue with resizing the prototype link on my Squarespace website.  Currently, it is too large for anyone to effectively click-through, you have to scroll up and down to view the whole prototype.

Screen Shot 2021-08-17 at 5.36.14 AM.pngexpand image

 

I tried using this custom CSS, 

div#block-yui_3_17_2_1_1628389713241_45661 iframe {
overflow:hidden;
height:75%;
width:75%;
}

But this makes the prototype mini. 

Screen Shot 2021-08-17 at 5.34.18 AM.pngexpand image

I also tried, 

div#block-yui_3_17_2_1_1628389713241_45661 {
  width: 50%;
  margin: 0 auto;
}

And this doesn't have any effect on it.

 

Hi. Your site is private. Can you setup password & share url again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...
  • 2 weeks later...
Posted

thanks to @tuanphan, here is what we put together.

 

@media screen and (min-width:768px) { //Desktop view
iframe[src="YOUR AbobeXD PROTOTYPE LINK"] {
    width: 60%!important; //this depends on any spacers you have next to your abobexd code injection
}
div#YOURBLOCKID {
    width: 60%!important; //this depends on any spacers you have next to your abobexd code injection
  }
}

@media screen and (max-width:767px) { //Mobile view
iframe[src="YOUR AbobeXD PROTOTYPE LINK"] {
    width: 90%!important;
  }
div#YOURBLOCKID {
    width: 90%!important;
  }
}

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.