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

Is it possible to fix the width of a text block?

Question

I am using the supply template and the text blocks auto-scale with the width of the browser. Is it possible for spacer blocks and image blocks to adjust for the browser scaling (remain full width) and the text block to remain a consistent or max width?

http://www.dillonjamesrobertson.com/

Edited by danieljs
retag

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 1

It is possible, at the moment your text box is set to be 50% width (6 column of a 12 column grid) until it detects a mobile screen.

If you didn't wish to scale you would just set a fixed width value to it, ie. 500pxor you would use media queries to change the width at specific browser sizes.

edit: adding code up here


    .sqs-block-content p {max-width:300px;}

@media only screen and (max-width:640px) {
   .sqs-block-content p {max-width:100%!important;}
}

change the values to whatever you need

Edited by benjamin

Share this post


Link to post
  • 0

How would I set a fixed width value? Do I need to inject code?

I'm sorry if this is dumb question; I am not sure if I am missing something, but with Squarespace 7 the only way I can find to adjust a block's width is when you place another block beside it and use the handle to scale them.

Thank you for the quick response!

Share this post


Link to post
  • 0

I would just like to assign it a fixed width of probably 300 pixels.

I am also looking to control this with future text blocks on the site how are you targeting the div( or squarespace equivalent)?

Thanks again

Share this post


Link to post
  • 0

This styling will be site-wide, if you use Custom CSS, or page specific if posted into your page > advanced > header injection area

first bit is the text box, second is a media query that makes it 100% wide on mobiles.

Posted into the answer, if you're using chrome, you can find out which element has what name, by right clicking on something and hitting 'inspect element'

Edited by benjamin

Share this post


Link to post
  • 0

Thank you! The code worked for the site wide approach! But, for some reason it failed when I put it in the page specific header injection area?

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...