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

How to resize code block?


hcyf

Question

  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...