Solved

How to make a blog picture smaller when viewed on a browser

doginabox
New Member
7 0 0

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

Accepted Solutions (2)

SagarSukhanandi
Shopify Partner
279 58 71

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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help

View solution in original post

SagarSukhanandi
Shopify Partner
279 58 71

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help

View solution in original post

Replies 12 (12)

JHKCreate
Shopify Expert
3571 639 916

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!

 

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
doginabox
New Member
7 0 0

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>

 

SagarSukhanandi
Shopify Partner
279 58 71

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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
doginabox
New Member
7 0 0

Hi @SagarSukhanandi 

I just tried that and it worked for the blog. However, it made the 'about' section too big.

Please see attached.

 

Before:

BeforeBefore

After:

AfterAfter

 

Thanks,

Tommy

SagarSukhanandi
Shopify Partner
279 58 71

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
doginabox
New Member
7 0 0

That's done the job 👍. Thanks

SagarSukhanandi
Shopify Partner
279 58 71

You are most welcome @doginabox 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
doginabox
New Member
7 0 0

Hi @SagarSukhanandi 

Just encountered a problem. The products are now displaying in a small layout. I have attached an image,

Thanks,

Tommy

fddsddh.PNG

SagarSukhanandi
Shopify Partner
279 58 71

@doginabox Could you please hard refresh you page? Page looks fine for me.

detail-page.PNG

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
doginabox
New Member
7 0 0

Hi @SagarSukhanandi 

I just refreshed and it appears that it only happens for a couple of products. For example this one: 

https://www.doginabox.co.uk/collections/current-best-sellers/products/wham-450ml-colourful-infuser-b...

Thanks,

Tommy

SagarSukhanandi
Shopify Partner
279 58 71

@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;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
kimr1
Visitor
3 0 0

hi will this still work in 2022 or is there an updated option? I cant seem to find the theme.scss.liquid