cancel
Showing results for 
Search instead for 
Did you mean: 

How to create responsive CMS BLOCK

SOLVED

How to create responsive CMS BLOCK

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.

1 ACCEPTED SOLUTION

Accepted Solutions

Re: How to create responsive CMS BLOCK

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 Smiley Happy 

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

View solution in original post

2 REPLIES 2

Re: How to create responsive CMS BLOCK

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 Smiley Happy 

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

Re: How to create responsive CMS BLOCK

@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?