Ride Theme: Full width featured images in a blog post

[Dan_Shust]

Hello all,

I am trying to have the featured image of each of my blog posts size to the entire width of the window the same way the home page image does. Any advice?

Thanks in advance!
Dan

[Mubashir_H]

Hello @Dan_Shust 

To have full-width featured images in your Shopify Ride theme blog posts, you will need to modify the theme's code. Here are the steps you can follow:

1. From your Shopify admin, go to Online Store > Themes > Customize.

2. Click on the Theme actions dropdown menu and select Edit code.

3. In the left sidebar, click on the Assets folder and find the file named "theme.scss.liquid".

4. Click on it to open the file in the code editor.

5. Scroll to the bottom of the file and add the following code:

.template-article .rte img {
max-width: 100%;
width: 100%;
}

Save the changes by clicking on the Save button at the top of the code editor.

This code will set the maximum width of images in your blog post content to 100%, which means they will expand to the full width of their container. This should make your featured images appear full-width.

Note that this change will affect all images in your blog post content, not just the featured image. If you only want the featured image to be full-width, you will need to add a specific class or ID to it and modify the code accordingly.

[Dan_Shust]

Thanks...I figured it out. This theme is setup a little differently with regards to css files. The change needed to be made in a file called:

section-blog-post.css

Needed to change this entry from 160rem to 100%

.article-template__hero-container {
max-width: 100%;
margin: 0 auto;

[Mubashir_H]

Awesome.

[GemPages]

Hello @Dan_Shust ,

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team