The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Contact Form Problem ( Shown in web browser, and not shown in mobile browser)
Alex Mike
post Apr 6 2020, 04:47 PM
Post #1





Group: Members
Posts: 3
Joined: 5-April 20
Member No.: 27,266



Hello everybody
I have a problem with my html code.
I have an HTML code in a PHP file.
When i enter my page from computer's browser, the contact form that i have in php file, is shown and is working very good.

When i enter my page from mobile phone's browser, the contact form that i have in php file is not shown..

I put down 2 pictures with the problem and the source code of web page.

IPB Image

IPB Image


This is my code

CODE
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Farmasi By Evi 2019 − Formular Inscriere</title>
  <link rel="icon" href="img/favicon.png">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- animate CSS -->
  <link rel="stylesheet" href="css/animate.css">
  <!-- owl carousel CSS -->
  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <!-- themify CSS -->
  <link rel="stylesheet" href="css/themify-icons.css">
  <!-- flaticon CSS -->
  <link rel="stylesheet" href="css/flaticon.css">
  <!-- font awesome CSS -->
  <link rel="stylesheet" href="css/magnific-popup.css">
  <!-- swiper CSS -->
  <link rel="stylesheet" href="css/slick.css">
  <link rel="stylesheet" href="css/gijgo.min.css">
  <link rel="stylesheet" href="css/nice-select.css">
  <link rel="stylesheet" href="css/all.css">
  <!-- style CSS -->
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!--::header part start::-->
  <header class="main_menu single_page_menu">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-lg-12">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="index.html"> <img src="img/logo.png" alt="logo"> </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="menu_icon"></span>
            </button>

            <div class="collapse navbar-collapse main-menu-item" id="navbarSupportedContent">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Acasa</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="invata.html">Invata</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="contract.html">Contract</a>
                    </li>
    <li class="nav-item">
                        <a class="nav-link" href="contact.php">Formular</a>
                    </li>
                </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>
  <!-- Header part end-->

  <!-- breadcrumb start-->
  <section class="breadcrumb breadcrumb_bgcontract">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="breadcrumb_iner text-center">
            <div class="breadcrumb_iner_item">
              <h2>Formular Inscriere</h2>
              <p>home <span class="ti-angle-double-right"></span>Formular</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- breadcrumb start-->

  <!-- ================ contact section start ================= -->
  <section class="contact-section section_padding">
    <div class="container">
      <div class="d-none d-sm-block mb-5 pb-4">
      <div class="row">
        <div class="col-12">
          <h2 class="contact-title">Inscrie-te</h2>
        </div>
        <div class="col-lg-8">
          <form class="form-contact contact_form" action="inscriere.php">
            <div class="row">
              <div class="col-12">
                <div class="form-group">
                  <input class="form-control" name="nume" id="name" type="name" onfocus="this.placeholder = ''"
                    onblur="this.placeholder = 'Numele tau'" placeholder='Numele tau' required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input class="form-control" name="numar" id="phone" type="text" onfocus="this.placeholder = ''"
                    onblur="this.placeholder = 'Numarul de telefon'" placeholder='Numarul de telefon' required>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <input class="form-control" name="email" id="email" type="email" onfocus="this.placeholder = ''"
                    onblur="this.placeholder = 'Adresa de email'" placeholder='Adresa de email' required>
                </div>
              </div>
            </div>
            <div class="form-group mt-3">
              <button type="submit" class="button button-contactForm btn_4">Trimite Mesajul Tau</button>
            </div>
          </form>
        </div>
        <div class="col-lg-4">
          <div class="media contact-info">
            <span class="contact-info__icon"><i class="ti-home"></i></span>
            <div class="media-body">
              <h3>Cluj Napoca</h3>
              <p>Cluj, Romania</p>
            </div>
          </div>
          <div class="media contact-info">
            <span class="contact-info__icon"><i class="ti-tablet"></i></span>
            <div class="media-body">
              <h3>+40 745 592 270</h3>
              <p>Lun - Vin: 09:00AM - 18:00PM</p>
            </div>
          </div>
          <div class="media contact-info">
            <span class="contact-info__icon"><i class="ti-email"></i></span>
            <div class="media-body">
              <h3>contact@farmasibyevi.ro</h3>
              <p>Ne poti trimite email pentru orice nelamurire.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </section>
  <!-- ================ contact section end ================= -->

  <!--::review_part start::-->
  <section class="review_part gray_bg section_padding">
      <div class="container">
          <div class="row justify-content-center">
              <div class="col-lg-10">
                                      <div class="client_review_part owl-carousel">
                      <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/1.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
          <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/3.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
          <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/4.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
          <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/5.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
          <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/6.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
          <div class="client_review_single">
                          <div class="client_review_text">
              <img src="img/carusel/7.png">
                          </div>
                          <div class="client_img">
                              <img src="img/client/client_1.png" alt="">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  </section>
  <!--::review_part end::-->

  <!-- footer part start-->
  <footer class="footer-area">
      <div class="container">
          <div class="row justify-content-between">
              <div class="col-xl-4 col-sm-6 col-lg-4">
                  <div class="single-footer-widget footer_1">
                      <h4>Despre Noi</h4>
                      <p>Echipa Farmasi by Evi / Phoenix Team este formata din tinere intreprinzatoare care doresc sa isi dezvolte
            cariera ca si network marketer / sales agent. Noi suntem fericiti cu ceea ce facem si ne bucuram ca
            avem ocazia de a face totul de acasa. Chiar de langa cei mici.</p>
                  </div>
              </div>
              <div class="col-xl-3 col-sm-6 col-lg-4">
                  <div class="single-footer-widget footer_2">
                      <h4>Contactati-ne</h4>
                      <div class="contact_info">
                          <span><img src="img/icon/facebook.png" width="24px" height="24px"></span>
                          <p><a href="http://facebook.com/farmasibyevi">Farmasi by Evi</a></p>
                      </div>
                      <div class="contact_info">
                          <span><img src="img/icon/phone.png" width="24px" height="24px"></span>
                          <h5><a href="tel:+40745 592 270">+40745 592 270</a></h5>
                          <p>Lun - Vin: 09:00AM - 18:00PM</p>

                      </div>
                  </div>
              </div>

              <div class="col-xl-4 col-sm-8 col-lg-4">
                  <div class="single-footer-widget footer_3">
                      <h4>Pagina Noastra</h4>
                      <div class="fb-page" data-href="https://www.facebook.com/FarmasibyEvi/" data-tabs="" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/FarmasibyEvi/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/FarmasibyEvi/">Farmasi by Evi</a></blockquote></div>
                  </div>
              </div>
          </div>
      </div>
      <div class="copyright_part">
          <div class="container-fluid">
              <div class="row">
                  <div class="col-lg-12 text-center">
                      <p class="footer-text m-0"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Farmasi by Evi - 2019<br><a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
                  </div>
              </div>
          </div>
      </div>
  </footer>
  <!-- footer part end-->

  <!-- jquery plugins here-->

  <script src="js/jquery-1.12.1.min.js"></script>
  <!-- popper js -->
  <script src="js/popper.min.js"></script>
  <!-- bootstrap js -->
  <script src="js/bootstrap.min.js"></script>
  <!-- easing js -->
  <script src="js/jquery.magnific-popup.js"></script>
  <!-- swiper js -->
  <script src="js/swiper.min.js"></script>
  <!-- swiper js -->
  <script src="js/masonry.pkgd.js"></script>
  <!-- particles js -->
  <script src="js/owl.carousel.min.js"></script>
  <!-- swiper js -->
  <script src="js/slick.min.js"></script>
  <script src="js/gijgo.min.js"></script>
  <script src="js/jquery.nice-select.min.js"></script>
  <!-- contact js -->
  <script src="js/jquery.ajaxchimp.min.js"></script>
  <script src="js/jquery.form.js"></script>
  <script src="js/jquery.validate.min.js"></script>
  <script src="js/mail-script.js"></script>
  <script src="js/contact.js"></script>
  <!-- custom js -->
  <script src="js/custom.js"></script>
</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2020, 06:07 PM
Post #2


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Could you link to the live page? It's difficult to view a local page on a phone. You also link to a shitload of CSS and JS files that we have no idea what they contain.

I'm sure that if you upload just the HTML to a server and go there with a browser you will see the form... wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alex Mike
post Apr 6 2020, 06:45 PM
Post #3





Group: Members
Posts: 3
Joined: 5-April 20
Member No.: 27,266



QUOTE(pandy @ Apr 6 2020, 06:07 PM) *

Could you link to the live page? It's difficult to view a local page on a phone. You also link to a shitload of CSS and JS files that we have no idea what they contain.

I'm sure that if you upload just the HTML to a server and go there with a browser you will see the form... wink.gif

I tried also to upload the file on server as html, and the same result.
I don't know what do you mean if i can link to a live page, but i think you need an url to my page so here it is:
http://farmasibyevi.ro/contact.php
or
http://farmasibyevi.ro/contact.html

bot of them are shown and 100% working on computer, but on android.... not shown. is blank
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2020, 07:19 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Yes, that's what I meant.

I think the problem is that your layout doesn't adopt well to small screens. The same thing happens with a desktop browser if you make the window smaller. It looks like the section below, with the scrolling screen caps, jumps up and covers the form when the width of the browser is a little less than 560px (on desktop, may be different on phone). On my phone the form comes back if I hold the phone horizontally, i.e. make the available space wider. So look over the layout. I'd look especially at any defined widths and positioning.


Desktop
Attached Image


Phone
Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Alex Mike
post Apr 6 2020, 07:27 PM
Post #5





Group: Members
Posts: 3
Joined: 5-April 20
Member No.: 27,266



QUOTE(pandy @ Apr 6 2020, 07:19 PM) *

Yes, that's what I meant.

I think the problem is that your layout doesn't adopt well to small screens. The same thing happens with a desktop browser if you make the window smaller. It looks like the section below, with the scrolling screen caps, jumps up and covers the form when the width of the browser is a little less than 560px (on desktop, may be different on phone). On my phone the form comes back if I hold the phone horizontally, i.e. make the available space wider. So look over the layout. I'l look especially at any defined widths and positioning.


Desktop
Attached Image


Phone
Attached Image


I really appreciate your answer and thank you for your time
But i don't really know how to do that and i didn't understand much than "code make form bigger than little screens" and i don't know how to solve it sad.gif
Do you think that you could help me please? I am a really noob at scripting and html language... i know only few general things (for newbie)...
Only if you have time.
Thank you
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 6 2020, 10:43 PM
Post #6


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



So how did you get the site together? Did you use a ready-made template?

I don't think I can help you without spedning a week on it and I'm not sure I could do it anyway. I looked with my browser's inspector, but nothing stood out. I had expected positioning gone wrong, but I didn't find anything like that. So I would have to download all those style sheets and scripts and try to untangle them... sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 01:33 AM