Solved

Venture Theme Blog "Featured Image" Size

UpperMountain
Excursionist
20 0 14

2nd thread of the day, thanks @JHKCreate for your help on the last one, huge help.

Ok, so I'm almost "there" with my blog setup.

I have 2 more coding issues I don't know how to solve myself:

1) When you go to my blog page (https://uppermountainllc.com/blogs/news-products-stories), the blog images are enormous.  I'd like them to still be there, but just a lot smaller visually.  Is there a way to reduce the image size of the "Featured Image" on this page?

Screen Shot 2021-02-21 at 4.25.19 PM.png

 

The "Featured Image" literally takes up the entire page:

Screen Shot 2021-02-21 at 4.26.09 PM.png

2) Once you click on the actual Blog Post ("read more"), I don't feel you need the "Featured Image" any longer.  Is there a way I just eliminated it altogether on the actual Blog Post (https://uppermountainllc.com/blogs/news-products-stories/paracord-pulleys) once someone clicks through? Thank you.

Screen Shot 2021-02-21 at 4.27.14 PM.png

 

Accepted Solutions (2)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hi @UpperMountain 

Happy to help!

For issue #1 add the following code to your theme.scss.css file at the end:

@media only screen and (min-width: 750px)
{
.article__photo-container {
    position: relative;
    width: 50%;
}
}

#shopify-section-article-content > div.content-block > div.content-block__full-image.content-block__full-image--large.small--one-whole.medium-up--one-whole > div.content-block__full-image.content-block__full-image--large > div {
    display: none;
}


Let me know!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Perfect @UpperMountain 

Add this code for the centering:

.article__photo-container {
    margin: auto;
}


That should do it!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 6 (6)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hi @UpperMountain 

Happy to help!

For issue #1 add the following code to your theme.scss.css file at the end:

@media only screen and (min-width: 750px)
{
.article__photo-container {
    position: relative;
    width: 50%;
}
}

#shopify-section-article-content > div.content-block > div.content-block__full-image.content-block__full-image--large.small--one-whole.medium-up--one-whole > div.content-block__full-image.content-block__full-image--large > div {
    display: none;
}


Let me know!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
UpperMountain
Excursionist
20 0 14

@JHKCreate thanks again, for issue #1, perfect size.  Is there a way to center the image over the blog text here?

https://uppermountainllc.com/blogs/news-products-stories

..and, it looks like you've also solved issue #2 in the code!  NICE, thank you.

Screen Shot 2021-02-22 at 11.22.13 AM.png

Screen Shot 2021-02-22 at 11.25.29 AM.png

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Perfect @UpperMountain 

Add this code for the centering:

.article__photo-container {
    margin: auto;
}


That should do it!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
UpperMountain
Excursionist
20 0 14

@JHKCreate, worked like a charm, thank you!

Screen Shot 2021-02-22 at 9.16.17 PM.png

Flash_king24
Visitor
2 0 0

Hey, do I put that entire listing of code? 

elgs
Tourist
8 0 0

How do I change the height of the image?