blog images size

lesbrons
Excursionist
98 0 39

hi, is there a way to make the images on my blog page bigger so that there are no margins around it (except for the tiny space in the middle)? everytime i try to edit the code to increase the size it spills over to the right of the page where you have to scroll horizontally to see the rest of the content, have been trying to avoid this

https://lesbrons.com/blogs/news

0 Likes
Pallavi
Shopify Expert
1731 252 306

Hello There,

Add this css and upload image same size

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset->styles.scss.css and paste this at the bottom of the file:

#blog-articles {
column-gap: 0px;
grid-template-columns: 51% 50%;
}

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
lesbrons
Excursionist
98 0 39

hi, all that did was get rid of the space in the middle of images. im trying to make the images bigger so i can get rid of the space on the outsides so theres no margins

0 Likes
lesbrons
Excursionist
98 0 39

anyone else have any ideas?

0 Likes
lesbrons
Excursionist
98 0 39

this is the code of my blog template. any way to get rid of page margins?

 

 

 

<div class="blog-template" data-section-id="{{ section.id }}">

{% if section.settings.image != blank %}
<div class="collection-banner">
{%- render 'basic-responsive-image', type: section.settings.image, data_widths: '[180, 360, 540, 720, 900, 1080, 1296, 1512]' -%}
<noscript>
<img src="{{ section.settings.image | img_url: '1024x' }}" alt="{{ section.settings.image.alt }}">
</noscript>
</div>
{% endif %}



<div id="content" class="row">
{% render 'breadcrumb' %}



<div class="clear"></div>
{% if section.settings.text != blank %}
<div id="blog-description" class="desktop-12 tablet-6 mobile-3" style="text-align: {{ section.settings.text_align }}">
<div class="rte">
{{ section.settings.text }}
</div>
</div>
<div class="clear"></div>
{% endif %}

<section class="blog-promos">

<div class="row">
{% for block in section.blocks %}
{%- case block.type -%}
{%- when 'promo_image' -%}
{% if block.settings.promo_image != blank %}
<a class="promo desktop-4 tablet-2 mobile-3 block-{{ block.id }}" href="{{ block.settings.promo_link }}">
<div class="promo-inner lazyload lazyload-fade"
data-bgset="{% render 'bgset', image: block.settings.promo_image %}"
data-sizes="auto">
<noscript>
<img src="{{ block.settings.promo_image | img_url: '800x' }}" alt="{{ block.settings.promo_image.alt }}">
</noscript>
<div class="promo-caption section-heading">
<h3>{{ block.settings.promo_text }}</h3>
</div>
</div>

</a>
{% else %}
<a class="promo desktop-4 tablet-2 mobile-3 block-{{ block.id }}" href="{{ block.settings.promo_link }}">
<div class="promo-inner" style="background-color: #eee;">
<div class="promo-caption section-heading">
<h3>{{ block.settings.promo_text }}</h3>
</div>
</div>
</a>
{% endif %}
{%- when 'banner_image' -%}
{% if block.settings.banner_image != blank %}
<a class="blog-banner block-{{ block.id }} desktop-12 tablet-6 mobile-3" href="{{ block.settings.banner_link }}">
{%- render 'basic-responsive-image', type: block.settings.banner_image, data_widths: '[180, 360, 540, 720, 900, 1080, 1296, 1512]' -%}
<noscript>
<img src="{{ block.settings.banner_image | img_url: '1024x' }}" alt="{{ block.settings.banner_image.alt }}">
</noscript>
</a>
{% endif %}
{%- endcase -%}
{% endfor %}
</div>
</section>

<div class="clear" ></div>
{% paginate blog.articles by 10 %}
<div id="blog-articles" class="articles">
{% for article in blog.articles %}
{% capture articleCycle %}{% cycle 'odd', 'even' %}{% endcapture %}
{% render 'article-loop', article: article, forloop: forloop, articleCycle: articleCycle %}
{% endfor %}
</div>


<div class="clear"></div>

{% render 'pagination', paginate: paginate %}

{% endpaginate %}

</div>




<style media="screen">
.article-body {
background-color: {{ section.settings.excerpt_bg_color }};
color: {{ section.settings.excerpt_text_color }};
}
.article-body h3,
.article-body a,
.article-body a:visited {
color: {{ section.settings.excerpt_text_color }} !important;

}
{% if section.settings.blog_layout_grid %}
.articles {
display: grid;
grid-template-columns: 800px 800px;
column-gap: 5px;
row-gap: 0px;}

.articles .single-article {
margin-bottom: 0;
padding-bottom: 0;
}
.articles .article-image {
width: 100%;
margin: 0 0 10px 0;
height: 400px;
overflow: hidden;
position: relative;
display: block !important;
}
.articles .single-article.even .article-image {
margin-left: 0 !important;
}
.article-image img {
width: 100%;
object-fit: cover;
height: 400px;
}
.articles .article-body {
padding: 10px !important;
text-align: center;
position: unset !important;
width: 100%;
margin: 0 !important;
}
.articles .single-article .posted {
text-align: center !important;
float: none !important;
}
@media screen and (max-width: 740px) {
.articles {
grid-template-columns: 1fr;
}
.articles .article-image {
height: 250px;
}
}
{% endif %}
</style>

</div>

 


{% schema %}
{
"name": "Blog",
"settings": [
{
"type":"header",
"content": "Banner Image"
},
{
"type": "image_picker",
"id": "image",
"label": "Banner Image",
"info" : "1800px x 400px recommended"
},
{
"type":"header",
"content": "Blog description"
},
{
"id": "text",
"type": "richtext",
"label": "Text",
"default": "<p>Add some descriptive text to your all Blog.</p>"
},
{
"type": "select",
"id": "text_align",
"label": "Align text",
"options":[
{
"value":"left",
"label":"Left"
},
{
"value":"center",
"label":"Center"
}
]
},
{
"type": "checkbox",
"id": "blog_layout_grid",
"label": "Layout as a grid",
"default": true
},


{
"type": "checkbox",
"id": "post_tags",
"label": "Show tags",
"default": true
},

{
"type": "checkbox",
"id": "show_author",
"label": "Show post author",
"default": true
},

 

 


{
"type": "color",
"id": "excerpt_bg_color",
"label": "Post excerpt BG color",
"default": "#ffffff"
},
{
"type": "color",
"id": "excerpt_text_color",
"label": "Post excerpt text color",
"default": "#000000"
}
],
"blocks": [
{
"type":"promo_image",
"name":"Promo Image",
"limit": 3,
"settings":[
{
"type": "image_picker",
"id": "promo_image",
"label": "Image"
},
{
"id": "promo_text",
"type": "text",
"label": "Promo Text",
"default": "Text"
},
{
"type": "url",
"id": "promo_link",
"label": "Link"
}
]
}
]
}
{% endschema %}

0 Likes