fbpx
Welcome, Guest
Username: Password: Remember me

Need a new feature in Astroid?

Submit feature requests on github and help improve Astroid.

Submit Now

TOPIC: (SOLVED) Responsive Stacking

Responsive Stacking 6 months 2 weeks 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: 6 months 2 weeks ago by MTC.
The topic has been locked.

Responsive Stacking 6 months 2 weeks ago #11192

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3006
  • Thank you received: 473
  • Karma: 79
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.

To know more about products check out the their documentation.
The topic has been locked.

Responsive Stacking 6 months 2 weeks 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 6 months 2 weeks ago #11199

  • chandandeep
  • chandandeep's Avatar
  • Offline
  • Administrator
  • Posts: 3006
  • Thank you received: 473
  • Karma: 79
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.

To know more about products check out the their documentation.
The topic has been locked.
Time to create page: 0.175 seconds