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

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!!

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!!

Is it the result you want to achieve?

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

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!

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

On 3/6/2022 at 5:38 AM, tuanphan said:

Try this code

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

 

You are a hero!!! Thank you so much!

I am having the same issue and this particular code paste did not work. Any other options out there? Thanks for your time in responding!

On 2/18/2023 at 8:09 PM, SailVermont said:

I am having the same issue and this particular code paste did not work. Any other options out there? Thanks for your time in responding!

What is your blog page url? We can check easier