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

Store Design
1

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

2

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!

3

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

. Thanks, Tommy

{% paginate blog.articles by 5 %}

  # 
    {% if current_tags %}
      {{ current_tags.first }}
    {% else %}
      {{ blog.title }}
    {% endif %}
    
      {% include 'icon-rss' %}
      RSS
    
  

 
  
  
    

      {% for article in blog.articles %}

          

            {% if article.tags.size > 0 %}
              {% for tag in article.tags %}
                **{{ tag }}**{% if forloop.last %} - {% else %}, {% endif %}
              {% endfor %}
            {% endif %}
            {{ article.published_at | time_tag: format: 'date' }}
4

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;
}
}
1 Like
5

Hi @SagarSukhanandi

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

Please see attached.

Before:

Before
Before1019×541 410 KB

After:

After
After557×896 429 KB

Thanks,

Tommy

6

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

That’s done the job :+1: . Thanks

8

You are most welcome @doginabox

9

Hi @SagarSukhanandi

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

Thanks,

Tommy

fddsddh.PNG
fddsddh.PNG1758×949 173 KB

10

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

detail-page.PNG
detail-page.PNG1354×662 78 KB

11

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-bottles

Thanks,

Tommy

12

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

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