Solved: Re: How to create responsive CMS BLOCK

Aveeva · ‎12-06-2020

How to display my 4 images as responsive in CMS Block,

Web View :

Image 1 Image 2 Image 3 Image 4

Tab View :

image 1 image 2

image 3 image 4

Mobile :

image 1

image 2

image 3

image 4

Note : I am using custom theme inherit from Blank theme.

amitsamsukha · ‎12-09-2020

you can follow these steps :

open default_head_blocks.xml of your theme and add bootstrap.css

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" src_type="url" />
    </head>
</page>

edit cms block and add below HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-2"><img src="" alt="1 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="2 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="3 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="4 of 4 img" /></div>
    </div>
</div>

now you are good to go

kindly Accept as a Solution if this works for you and give Kudos

View solution in original post

amitsamsukha · ‎12-09-2020

you can follow these steps :

open default_head_blocks.xml of your theme and add bootstrap.css

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" src_type="url" />
    </head>
</page>

edit cms block and add below HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12 col-md-2"><img src="" alt="1 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="2 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="3 of 4 img" /></div>
        <div class="col-sm-12 col-md-2"><img src="" alt="4 of 4 img" /></div>
    </div>
</div>

now you are good to go

kindly Accept as a Solution if this works for you and give Kudos

Aveeva · ‎12-15-2020

@amitsamsukha How to align mobile view like,

image 1 image 2

image 3 image 4

What should i use in col-sm and col-md, and in which condition use col-xs?