Solved

Venture Blog article width and preview photo formatting.

UpperMountain
Excursionist
20 0 14

Hello, 

First post here in the Shopify Community.  Thanks for any help you can send my way, I'd really appreciate it. 

I have 2 Venture Theme blog related questions:

1.  when you click on a blog post to read on my site, the actual article is in one narrow column to the left.  How can I get this to fill the screen to make it easier to read?

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

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

 

2.  I have the blog previews at the bottom of my home page https://uppermountainllc.com.  I don't care for the way the images are "smushed" together.  Can these be easily separated in some way?

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

 

Accepted Solutions (2)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hello @UpperMountain 

For your squashed problem, add the following code to your theme.scss.css code:

.grid__item.small--one-whole.medium-up--one-third {
    padding: 15px;
}

 

As for the block not taking full width, it seems to be coded to be 1/3 width 

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.

Hi @UpperMountain 

All Good now, have a look!

Cheers

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 11 (11)

JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hello @UpperMountain 

For your squashed problem, add the following code to your theme.scss.css code:

.grid__item.small--one-whole.medium-up--one-third {
    padding: 15px;
}

 

As for the block not taking full width, it seems to be coded to be 1/3 width 

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

That fixed my "smushed" problem perfectly:

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

.. Thank you!

Would you mind directing me to the main article block code to change it from 1/3 to full width?

i.e. https://uppermountainllc.com/blogs/news-products-stories/h2optix-sunglasses

JHKCreate
Shopify Expert
3571 639 916

This has to be in the page code itself for the block. Can you go into the Article, click on the "</>" button and paste the code here so we can check?

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

This is from blog.liquid, is that what you meant?

{% paginate blog.articles by 5 %}

<div class="page-width">

  <h1>
    {% if current_tags %}
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
    <a href="{{ shop.url }}{{ blog.url }}.atom" class="blog__rss-link link-accent-color">
      {% include 'icon-rss' %}
      <span class="icon__fallback-text">RSS</span>
    </a>
  </h1>

  <div class="grid">
    <div class="grid__item{% if blog.all_tags.size > 0 %} medium-up--three-quarters large-up--four-fifths{% endif %}">
      {% for article in blog.articles %}
        <div class="content-block">

          <p class="blog__meta">
            {% if article.tags.size > 0 %}
              {% for tag in article.tags %}
                <a href="{{ blog.url }}/tagged/{{ tag | handle }}" class="link-body-color"><strong>{{ tag }}</strong></a>{% if forloop.last %} - {% else %}, {% endif %}
              {% endfor %}
            {% endif %}
            {{ article.published_at | time_tag: format: 'date' }}
          </p>

          <h2 class="blog__title-link"><a href="{{ article.url }}">{{ article.title }}</a></h2>

          {% if article.image %}
          
            <div class="content-block__full-image content-block__full-image--large">
              <a href="{{ article.url }}">
                <noscript>
                  {{ article | img_url: '1024x1024' | img_tag: article.title | escape }}
                </noscript>
                <div class="article__photo-container">
                  <div class="article__photo-wrapper" style="padding-top:{{ 1 | divided_by: article.image.aspect_ratio | times: 100}}%;">
                  {% assign img_url = article.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                    <img class="lazyload"
                      src="{{ article.image | img_url: '300x300' }}"
                      data-src="{{ img_url }}"
                      data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                      data-aspectratio="{{ article.image.aspect_ratio }}"
                      data-sizes="auto"
                      alt="{{ article.title | escape }}">
                  </div>
                </div>
              </a>
            </div>
          {% endif %}

          <div class="rte rte--indented-images">
            {% if article.excerpt.size > 0 %}
              {{ article.excerpt }}
            {% else %}
              <p>{{ article.content | strip_html | truncatewords: 100 }}</p>
            {% endif %}
          </div>

          <p><a href="{{ article.url }}"><strong>{{ 'blogs.article.read_more' | t }}</strong></a></p>

        </div>
      {% endfor %}
    </div>
    {% if blog.all_tags.size > 0 %}
      <div class="grid__item medium-up--one-quarter large-up--one-fifth small--hide">
        <div class="content-block content-block--small">
          <h6 class="content-block__title">{{ 'blogs.article.tags' | t }}</h6>
          <ul class="list--no-bullets list--bold">
            <li>
              <a href="{{ blog.url }}">{{ 'blogs.article.all_tags' | t }}</a>
            </li>
            {% for tag in blog.all_tags %}
              {% if current_tags contains tag %}
              <li>{{ tag }}</li>
              {% else %}
              <li>{{ tag | link_to_tag: tag }}</li>
              {% endif %}
            {% endfor %}
          </ul>
        </div>
      </div>
    {% endif %}
  </div>

  {% section 'featured-products-subsection' %}

  {% if paginate.pages > 1 %}
    <div class="pagination">
      {{ paginate | default_pagination | replace: '&laquo; Previous', '&larr;' | replace: 'Next &raquo;', '&rarr;' }}
    </div>
  {% endif %}

</div>

{% endpaginate %}
JHKCreate
Shopify Expert
3571 639 916

I actually meant the code of the  post itself that you can find inside "Online Store" -> "Blogs"

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

Wow, I've never noticed that or done that before thanks, I think these are it:

(deleted)

JHKCreate
Shopify Expert
3571 639 916

This seems to be the code to your Sunglasses collection, not your actual Blog post as it seems. Can we request collaborator access and check this on our end?

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

Sure, thank you.

Please let me know if I need to do something on my end for the collaboration, regards.

JHKCreate
Shopify Expert
3571 639 916

Hi @UpperMountain 

Invite sent, we'll have a look shortly after you approve 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
JHKCreate
Shopify Expert
3571 639 916

This is an accepted solution.

Hi @UpperMountain 

All Good now, have a look!

Cheers

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 That is exactly what I was looking for thank you so much!

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