CODEWITHSUNDEEP
javascripthtmlcssangular
zohra makhloufi
zohra makhloufi

Reputation: 47

Angular how to display page in a one way in desktop and in another way in responsive mode mobile

I have an angular web page like this this is the picture

I have no problem in web version but I want to display in another way in mobile version like title picture and text this is an example of my code

<div class="our-company-history section-space--ptb_100">
        <div class="container-fluid">
  
  
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="faq-custom-col">
                        <div class="section-title-wrap">
  
                      
                            <h3 class="heading"><span class="text-color-primary">Développement Logiciel</span></h3>
                            <h6 class="text" [innerHtml]="cont.developement"></h6>
      
                            <p  [innerHtml]="cont.developement_suite" class="text mt-30"></p>
  
  
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="rv-video-section">
  
                        <div class="ht-banner-01 ">
                            <img class="img-fluid border-radus-5 animation_images one wow fadeInDown" src="assets/images/banners/logiciel4.png" alt="">
                        </div>
    
                        <div class="ht-banner-02">
                            <img width="188" height="115" class="img-fluid border-radus-5 animation_images two wow fadeInDown" src="assets/images/banners/logiciel3.png" alt="">
                        </div>
    
                        <div class="main-video-box video-popup">
                            <a  class="video-link  mt-30">
                                <div class="single-popup-wrap">
                                    <img class="img-fluid border-radus-5" src="assets/images/banners/logicielb.png" alt="">
                                    <div class="ht-popup-video video-button">
    
                                    </div>
                                </div>
                            </a>
                        </div>
    
    
                        <div class="ht-banner-03">
                            <img  width="188" height="115" class="img-fluid border-radus-5 animation_images three wow fadeInDown" src="assets/images/banners/logiciel1.png" alt="">
                        </div>
    
                        <div class="ht-banner-04">
                            <img width="190" height="190" class="img-fluid border-radus-5 animation_images four wow fadeInDown" src="assets/images/banners/logiciel2.png" alt="">
                        </div>
    
  
  
                    </div>
                </div>
            </div>
        </div>
    </div>

I looked a lot for a method to display mode in another way in mobile version I need some help and thank you

Upvotes: 0

Views: 268

Answers (1)

Indrajeet Gajbhiye
Indrajeet Gajbhiye

Reputation: 51

With the given problem, I think its better if you use media queries to hide/show elements in browser. Further you may need to add few lines of html to change layout.

Or you can follow bootstrap grid layout / flex box to give it basic responsiveness.

there are a lot of references out there to solve this issue.

Upvotes: 1

Related Questions