layout in three parts and pictures

Question

Hey all

I would like to design my layout in three parts.
Like here: https://t1p.de/8zyt  https://prntscr.com/1urkedy

I added the following CSS code for this.
.box {
  float: left;
  width: 33.3333%;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 3%;
 }
<div class="box">
  <h1 itemscope itemtypeee="http://schemaaa.org/Organization">
     <a href="{$website:url}" title="{$plugin:widcard:BizOrgName:notag}" itemprop="url">
        <img src="{$plugin:widcard:bizLogo:url}" alt="{$page:h1}"  itemprop="logo">
     </a>
  </h1>
</div>

Unfortunately the design is no longer responsive.
In the cell phone, I don't want the design to be in three parts.
Everything should be arranged there under each other.

If I click on the pictures or on the button below, I want to get to the sub-pages. Like here.

I am not very familiar with CSS and web design.
Do you have any tips for me?

Thanks very much

Ronny

Answer 1

Hello, Ronny.

If you are using Flexkit. Flexkit has responsive classes for tablets and mobile devices.
Your html code should look like this

<div class="container flex-row">

<div class="box flex_4 t-flex_6 m-flex_4"></box>
<div class="box flex_4 t-flex_6 m-flex_4"></box>
<div class="box flex_4 t-flex_6 m-flex_4"></box>

</div>

Regards, Alexander.

Comments

thanks worked great