Jump to content

Width of img blocks in blog posts not matching width of text & code blocks

Recommended Posts

Site URL: https://www.pamjeannephoto.com/galleries/coastal-adventure-elopement-in-big-sur-ca

I feel like this should be an easy fix but I've been racking my brain for the longest time trying to fix this...

How do I make my text and code blocks the same width as my image block in my blog posts? In the specified URL, the first image is an image block, which spans the width of the blog post. The following text block and code block (containing all the other images - it's a script from the Narrative blogging app) are narrower in width. I'd like it such that everything is the same width, but not so wide that the first image block fills up the entire screen for desktop viewers. Attached a screenshot with markings of roughly what I'm trying to achieve.

For phone and tablet users, I'd like it to span the width of the entire screen.

Hope this makes sense. Thanks in advance!!

Screen Shot 2022-03-02 at 5.01.48 PM.png

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

On 3/3/2022 at 8:04 AM, pamjeanne said:

Site URL: https://www.pamjeannephoto.com/galleries/coastal-adventure-elopement-in-big-sur-ca

I feel like this should be an easy fix but I've been racking my brain for the longest time trying to fix this...

How do I make my text and code blocks the same width as my image block in my blog posts? In the specified URL, the first image is an image block, which spans the width of the blog post. The following text block and code block (containing all the other images - it's a script from the Narrative blogging app) are narrower in width. I'd like it such that everything is the same width, but not so wide that the first image block fills up the entire screen for desktop viewers. Attached a screenshot with markings of roughly what I'm trying to achieve.

For phone and tablet users, I'd like it to span the width of the entire screen.

Hope this makes sense. Thanks in advance!!

Screen Shot 2022-03-02 at 5.01.48 PM.png

Is it the result you want to achieve?

image.thumb.png.58437be336623dacf5c9c2f80c6682fe.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Try adding to Home > Design > Custom Css

#block-73a84209fc57668b846e {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

Let me know how it works on your site

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
41 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

#block-73a84209fc57668b846e {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}

Let me know how it works on your site

Hi! Thank you for responding! Sooo that only targets that specific block on that specific blog post, is there a universal code I can use to apply to all blog posts on my site?

 

Thanks again!

Link to comment
On 3/5/2022 at 8:34 AM, pamjeanne said:

Hi! Thank you for responding! Sooo that only targets that specific block on that specific blog post, is there a universal code I can use to apply to all blog posts on my site?

 

Thanks again!

Try this code

body.collection-type-blog.view-item .html-block {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

 

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

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

Create an account or sign in to comment

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

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