Liquid, JavaScript, themes, sales channels
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
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?
Solved! Go to the solution
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
This is an accepted solution.
All Good now, have a look!
Cheers
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
That fixed my "smushed" problem perfectly:
.. 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
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?
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: '« Previous', '←' | replace: 'Next »', '→' }}
</div>
{% endif %}
</div>
{% endpaginate %}
I actually meant the code of the post itself that you can find inside "Online Store" -> "Blogs"
Wow, I've never noticed that or done that before thanks, I think these are it:
(deleted)
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?
Sure, thank you.
Please let me know if I need to do something on my end for the collaboration, regards.
Invite sent, we'll have a look shortly after you approve it.
This is an accepted solution.
All Good now, have a look!
Cheers
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024