fbpx

You'll fall in love with this sweet deal Save 25% with this code: VALENTINESDAY Unlock Offer

Welcome, Guest
Username: Password: Remember me

TOPIC: (SOLVED) Responsive Stacking

Responsive Stacking 1 week 3 days ago #11179

  • MTC
  • MTC's Avatar
  • Offline
  • New Member
  • Posts: 4
  • Karma: 0
I spoke too soon...
Hi, I just started with astroid this week, very nice, and am at the point of adding modules with classes such as col-sm-4 to one row for example in section 3 / position 3 so I can have 3 modules side by side which is how I have always done but these 3 modules are stacking instead. I am not sure if the edit grid feature is the place I should be tweaking. Any help is appreciated, thank you in advance.

<section id='section-3-1529739392463' class='astroid-section py-3 py-md-5' style='' data-animation='' data-animation-delay='' >
<div class='container'>
<div class="row">
<div id="astroid-column-1529739392463" class="astroid-column col-lg-12" style="" data-animation="" data-animation-delay="" >
<div class="astroid-module-position" id="position-3-1529739392463" style="" data-animation="" data-animation-delay="" >
<div class="moduletable col-sm-4">
<div class="customcol-sm-4" ><p><strong>text</strong></p></div>
</div>
<div class="moduletable col-sm-4">
<div class="customcol-sm-4" ><p><strong>text</strong></p></div>
</div>
<div class="moduletable col-sm-4">
<div class="customcol-sm-4" ><p><strong>text</strong></p></div>
</div>
</div></div></div></div></section>
Last Edit: 1 week 3 days ago by MTC.
The topic has been locked.

Responsive Stacking 1 week 3 days ago #11192

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2530
  • Thank you received: 400
  • Karma: 61
Hello,

I've checked your code. I found you miss the .row class. I have fixed the code. Please use it.

<section id="section-3-1529739392463" class="astroid-section py-3 py-md-5" data-animation="" data-animation-delay="">
   <div class="container">
      <div class="row">
         <div id="astroid-column-1529739392463" class="astroid-column col-lg-12" data-animation="" data-animation-delay="">
            <div class="astroid-module-position" id="position-3-1529739392463" data-animation="" data-animation-delay="">
               <div class="row">
                  <div class="moduletable col-sm-4">
                     <div class="custom">
                        <p><strong>text</strong></p>
                     </div>
                  </div>
                  <div class="moduletable col-sm-4">
                     <div class="custom">
                        <p><strong>text</strong></p>
                     </div>
                  </div>
                  <div class="moduletable col-sm-4">
                     <div class="custom">
                        <p><strong>text</strong></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.

Responsive Stacking 1 week 3 days ago #11196

  • MTC
  • MTC's Avatar
  • Offline
  • New Member
  • Posts: 4
  • Karma: 0
THANK YOU
So I added the row class to the "edit element" in the section/position and it worked!
That process added the row class here in this code:
<div class="astroid-module-position row" id="position-3-1529739392463" style="" data-animation="" data-animation-delay="" >
<div class="moduletable col-sm-4">......
Now responsive. Working.
Thank you again.
Have a great month!
The topic has been locked.

Responsive Stacking 1 week 3 days ago #11199

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 2530
  • Thank you received: 400
  • Karma: 61
Am Glad. I solved your problem.

Topic Solved.

Thanks,
Chandan
Thank You,
If you like our support and products, tweet us at joomdev and let the world know about it.
The topic has been locked.
Time to create page: 0.467 seconds