Shopify themes, liquid, logos, and UX
Hi,
I have created a blog for my Shopify store and it looks great on a phone, however, when viewed on a browser the images are way too large and look ridiculous. How do I make my blog page have a different layout so that each post and pictures are smaller and next to each other like products.
The link is: https://www.doginabox.co.uk/blogs/our-latest-news
I am using the Venture theme.
Thanks
Solved! Go to the solution
This is an accepted solution.
Hello @doginabox
Here is the solution to fix your issue
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.medium-up--one-half {
width: 30% !important;
margin: 15px !important;
min-height: 880px !important;
}
}
This is an accepted solution.
Hello @doginabox
Add this code at the end
.flex__item.flex.flex--center-vertical.medium-up--one-half {
width: 100% !important;
margin: 0px !important;
min-height: auto !important;
}
Hi @doginabox
Please add the following code to your theme.scss.css file:
@media only screen and (min-width: 750px)
{
.article__photo-container {
width: 50%;
margin: auto;
}
}
Let me know if that works for you!
Hi,
That didn't work I'm afraid. I tried someone else's code on the blog.liquid page but it is making it all uneven as you will be able to see. I have attached the beggining of the code below. The bit I changed was the <div class="content-block grid__item medium-up--one-half"> . Thanks, Tommy
{% 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 grid__item medium-up--one-half">
<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>
This is an accepted solution.
Hello @doginabox
Here is the solution to fix your issue
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (min-width: 750px){
.medium-up--one-half {
width: 30% !important;
margin: 15px !important;
min-height: 880px !important;
}
}
I just tried that and it worked for the blog. However, it made the 'about' section too big.
Please see attached.
Before:
After:
Thanks,
Tommy
This is an accepted solution.
Hello @doginabox
Add this code at the end
.flex__item.flex.flex--center-vertical.medium-up--one-half {
width: 100% !important;
margin: 0px !important;
min-height: auto !important;
}
That's done the job 👍. Thanks
You are most welcome @doginabox
Just encountered a problem. The products are now displaying in a small layout. I have attached an image,
Thanks,
Tommy
@doginabox Could you please hard refresh you page? Page looks fine for me.
I just refreshed and it appears that it only happens for a couple of products. For example this one:
Thanks,
Tommy
@doginabox
Add below style at the end of css
@media only screen and (min-width: 750px){
.product-single .medium-up--one-half {
width: 50% !important;
margin: 0px !important;
}
}
hi will this still work in 2022 or is there an updated option? I cant seem to find the theme.scss.liquid
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