How to resize code block?

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 ?

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 ?

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;
}
}

@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.

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. 

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.

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.

 

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. 

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?

Can you share access password again? I think i don't see your message

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;
  }
}