My HTML template website is not showing certain images and text on my mobile-CodePudding

I have edited an HTML website and certain images are not showing on my mobile however they show perfectly on my PC! Can anyone advise please on what i need to do? Maybe change some code. I have added the relevant code (I think) below! I am a neewbie so please handle with care! Thank you so much I have attached the 2 versions (PC and Mobile, which shows the Beauty and Elgegance wording as well as the Read more And See Our Work options)

Regards Jules

<!-- Slider -->
<div id="main-slider">
    <div >
        <div  id="mainSlider">
            <div  data-delay="4" style="z-index: 11">
                <img src="css/ms-style/blank.gif" data-src="images/main-slider/bg1.jpg" alt="lorem ipsum dolor sit"/>

                <h3   style="right:0; left:0; text-align:center; top:205px; color:#000"
                    data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="400"
                  data-ease="easeOutExpo"
                ></h3>
                
                  <h1   style="right:0; left:0; text-align:center; top:243px"
                    data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="700"
                  data-ease="easeOutExpo"
                >Creating Art </h1> 
                                  
                <a href="#"  style="left:440px; top:340px"
                            data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="900"
                  data-ease="easeOutExpo"
                >Read More </a>
                
                <a href="#"  style="left:600px; top:340px"
                            data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="950"
                  data-ease="easeOutExpo"
                >See Our Work </a>
               
                 
            </div>
            <div  data-delay="4" style="z-index: 10">
                <img src="css/ms-style/blank.gif" data-src="images/main-slider/bg.jpg" alt="lorem ipsum dolor sit"/>
               
               <h1   style="left:0px; top:210px; color:#ffffff"
                            data-effect= "right(90)"
                            data-duration="600"
                            data-delay="300" 
                            data-ease= "easeOutQuart">
                              Beauty & Elegance
              </h1>
                
               <h3   style="left:0px; top:265px; color:#ffffff"
                            data-effect= "right(90)"
                            data-duration="600"
                            data-delay="600" 
                            data-ease= "easeOutQuart"></h3>
                    
           <a href="#"  style="left:10px; top:330px"
                            data-effect="bottom(20)"
                            data-duration="600"
                            data-delay="700"
                            data-ease="easeOutExpo"
                >Read More </a>
                
                <a href="#"  style="left:180px; top:330px"
                            data-effect="bottom(20)"
                            data-duration="600"
                            data-delay="800"
                            data-ease="easeOutExpo"
                >See Our Work </a>
            </div>
            
            <div  data-delay="4" style="z-index: 12">
               <img src="css/ms-style/blank.gif" data-src="images/main-slider/bg4.jpg" alt="lorem ipsum dolor sit"/>     
                 
              <h3   style="right:195px; top:220px;"
                    data-effect="top(20)"
                  data-duration="600"
                  data-delay="200"
                  data-ease="easeOutExpo"
               ></h1>
                
               <h1   style="right:0px; top:252px;"
                    data-effect="top(20)"
                  data-duration="600"
                  data-delay="400"
                  data-ease="easeOutExpo">Modern & Contemporary</h1>
                    
           <a href="#"  style="right:520px; top:330px"
                            data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="600"
                  data-ease="easeOutExpo"
                >Read More </a>
                
                <a href="#"  style="right:340px; top:330px"
                            data-effect="bottom(20)"
                  data-duration="600"
                  data-delay="700"
                  data-ease="easeOutExpo"
                >See Our Work </a>

I have tried uploading the images again and this did not work.

CodePudding user response：

You haven't attached the css so I can't replicate your code exactly, but you might need to adjust the sizes and positions of the images based on different screen sizes. This is done using media queries.

CodePudding user response：

You didn't add the css code of the HTML. I suggest you check the positions of the div. Also, use media queries.