Jump to content

Please help! W3 page is bigger then a mobile screen

Roman Heidemann

By Roman Heidemann
in HTML/XHTML

 Share

Recommended Posts

  • Roman Heidemann changed the title to Please help! W3 page is bigger then a mobile screen
Roman Heidemann Newbie

Roman Heidemann

Posted
  • Author
Posted (edited)

<!DOCTYPE html>
<html>
    <head>
    
<title>Благотворительный фонд помощь больным детям хочу помочь ребенку</title>
<meta charset="UTF-8">
<meta name="description" content="Благотворительный фонд забота и помощь детям помогает больным детям дцп и в трудной ситуации" />
<meta name="keywords" content="помощь больные дети дцп больной ребенок бф благотворительный фонд пожертвовать помочь деньгами" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="yandex-verification" content="92b0ee1f447aba9e" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="/css/top.css">
<link rel="stylesheet" href="/css/styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- slick-slides CSS -->
<link rel="stylesheet" type="text/css" href="/slick/slick.css">
<link rel="stylesheet" type="text/css" href="/slick/slick-theme.css">
<!-- slick-slides CSS End -->

<!-- Sidebar -->
<style>
.w3-sidebar a {font-family: "Roboto", sans-serif}
body,h1,h2,h3,h4,h5,h6,.w3-wide {font-family: "Montserrat", sans-serif;}
</style>


<!-- Tik-Tok pixel -->
<script>
!function (w, d, t) {
  w.TiktokAnalyticsObject=t;var ttq=w[t]=w[t]||[];ttq.methods=["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie"],ttq.setAndDefer=function(t,e){t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};for(var i=0;i<ttq.methods.length;i++)ttq.setAndDefer(ttq,ttq.methods[i]);ttq.instance=function(t){for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)ttq.setAndDefer(e,ttq.methods[n]);return e},ttq.load=function(e,n){var i="https://analytics.tiktok.com/i18n/pixel/events.js";ttq._i=ttq._i||{},ttq._i[e]=[],ttq._i[e]._u=i,ttq._t=ttq._t||{},ttq._t[e]=+new Date,ttq._o=ttq._o||{},ttq._o[e]=n||{};var o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=i+"?sdkid="+e+"&lib="+t;var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(o,a)};


  ttq.load('C0B7NA5OQ3DFKFN9A17G');
  ttq.page();
}(window, document, 'ttq');
</script>
<!-- End Tik-Tok pixel -->

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-100815197-2">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-100815197-2');
</script>
<!-- End Global site tag (gtag.js) - Google Analytics -->

<!-- Rating Mail.ru counter -->
<script type="text/javascript">
var _tmr = window._tmr || (window._tmr = []);
_tmr.push({id: "3205851", type: "pageView", start: (new Date()).getTime()});
(function (d, w, id) {
  if (d.getElementById(id)) return;
  var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
  ts.src = "https://top-fwz1.mail.ru/js/code.js";
  var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
  if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
})(document, window, "topmailru-code");
</script><noscript><div>
<img src="https://top-fwz1.mail.ru/counter?id=3205851;js=na" style="border:0;position:absolute;left:-9999px;" alt="Top.Mail.Ru" />
</div></noscript>
<!-- //Rating Mail.ru counter -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(47234841, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/47234841" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

<!--LiveInternet counter-->
<script type="text/javascript">
new Image().src = "//counter.yadro.ru/hit?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";h"+escape(document.title.substring(0,150))+
";"+Math.random();</script>
<!--/LiveInternet-->


<!-- Share Icons -->
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
</head>

<body class="w3-content" style="max-width:100%">

<!-- Sidebar/menu -->
<nav class="w3-sidebar w3-bar-block w3-white w3-collapse w3-top w3-mobile w3-animate-left" style="z-index:3;width:25%" id="mySidebar">
  <div class="w3-container w3-display-container w3-padding-6">
      
  <!-- Cross on responsive menu -->
  <i onclick="w3_close()" class="fa fa-times fa-2x w3-hide-large w3-button w3-display-topright"></i>
  
    <p class="w3-wide"><img src="/img/logo.jpg" style="width:100%"></p>
  </div>
  
  <div class="w3-padding-0 w3-large w3-text-grey" style="font-weight:bold">
    <a onclick="myAccFunc()" class="w3-button w3-block w3-red w3-left-align"> Наши проекты <i class="fa fa-caret-down"></i></a>
    <div id="demoAcc" class="w3-bar-block w3-hide w3-padding-large w3-medium">
      <a href="https://помогижить.заботадетям.рф" class="w3-bar-item w3-button w3-red"><i class="fa fa-caret-right w3-margin-right"></i>Помоги жить!</a>
      <a href="https://тетрадкадружбы.заботадетям.рф" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Тетрадка дружбы</a>
      <a href="https://стритбол.заботадетям.рф" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Стритбол</a>
      <a href="https://даридобро.заботадетям.рф" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Дари добро</a>
      <a href="https://домребенка.заботадетям.рф" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Дом ребенка</a>
      <a href="https://времяцветов.заботадетям.рф" class="w3-bar-item w3-button w3-light-grey"><i class="fa fa-caret-right w3-margin-right"></i>Время цветов</a>
    </div>
    <a href="https://помоги.заботадетям.рф" class="w3-bar-item w3-button">Как помочь</a>
    <a onclick="w3_close()" href="#about" class="w3-bar-item w3-button">О фонде</a>
    <a onclick="w3_close()" href="#mission" class="w3-bar-item w3-button">Миссия фонда</a>
    <a onclick="w3_close()" href="#team" class="w3-bar-item w3-button">Координаторы</a>
    <a onclick="w3_close()" href="#rewards" class="w3-bar-item w3-button">Благодарности</a>
    <a onclick="w3_close()" href="#contact" class="w3-bar-item w3-button">Контакты</a>
    <a onclick="w3_close()" href="http://документы.заботадетям.рф" class="w3-bar-item w3-button">Документы</a>
    </div>

</nav>

<!-- Top menu on small screens -->
<header class="w3-bar w3-top w3-hide-large w3-white w3-xlarge">
  <div class="w3-bar-item w3-padding-14 w3-wide">
      <img src="/img/logo_48x48.jpg" style="width:100%">
  </div>
  <a href="javascript:void(0)" class="w3-bar-item w3-button w3-padding-14 w3-right" onclick="w3_open()"><i class="fa fa-bars fa-lg"></i></a>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main" style="margin-left:25%">
    
        <!-- Page Up Button -->
<button onclick="topFunction()" id="topBtn" title="Go to top"></button>

<script>
    
    // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("topBtn").style.display = "block";
    } else {
        document.getElementById("topBtn").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

  <!-- Push down content on small screens original margin-top:83px-->
  <div class="w3-hide-large" style="margin-top:23px"></div>
  
  <!-- Image header -->
<div class="w3-display-container w3-container w3-responsive">
  
<!-- Slide Show -->
<div class="w3-content w3-section" style="max-width:100%">
  <img class="mySlides" src="img/slideshow/1-0.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-1.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-2.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-3.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-4.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-5.jpg" style="width:100%"> 
  <img class="mySlides" src="img/slideshow/1-6.jpg" style="width:100%">
  <img class="mySlides" src="img/slideshow/1-7.jpg" style="width:100%">
</div>

<script>
var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    x[myIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // Change image every 3 seconds
}
</script>
<!-- End Slide Show -->
</div>

<!-- Video HTML5
<video style="width:100%;max-height:100%" muted autoplay loop controls playsinline preload="auto">
<source src="https://заботадетям.рф/img/slideshow/dom_rebenka_new_small.mp4" type="video/mp4">
<source src="https://заботадетям.рф/img/slideshow/dom_rebenka_new_small.ogv" type="video/ogg">
</video>
<script>
window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});
</script>
<!--End Video HTML5 -->

<!-- About -->
<div class="w3-container w3-text-grey w3-mobile w3-responsive" style="padding-top:60px" id="about">
    <h1>О нашем благотворительном фонде</h1>
  </div>
  <div class="w3-container w3-large w3-mobile w3-responsive">
     <div class="w3-left-align">
         <p>Наш фонд создан неравнодушными людьми для помощи больным детям, детям, оставшимся без попечения родителей и детям, попавшим в трудную жизненную ситуацию. </p>
              <p>У нас несколько проектов и главный из них - <strong><a href="https://помогижить.заботадетям.рф" class="w3-red">"Помоги жить!"</a> </strong> Мы с вашей помощью помогаем жить детям, которым это трудно сделать самим. </p>
              <p>Будьте с нами и вместе мы изменим мир к лучшему!</p>
     </div>
</div> 
  
<!-- Mission -->
<div class="w3-container w3-text-grey w3-mobile w3-responsive" style="padding-top:60px" id="mission">
    <h2>Миссия фонда</h2>
  </div>
  <div class="w3-container w3-large w3-mobile w3-responsive">
     <div class="w3-left-align">
              <p>Привлечение внимания общественности к социальной сфере;</p>
              <p>Развитие благотворительности, воспитание милосердия;</p>
              <p>Социальная защита, помощь и поддержка детей, оказавшихся в тяжёлой жизненной ситуации.</p>
     </div>
     </div>

 <!-- Team -->
   <div class="w3-container w3-text-grey w3-mobile w3-responsive" style="padding-top:60px" id="team">
    <p><h2>Координаторы</h2></p>
   </div>
   
  <div class="w3-row w3-grayscale w3-mobile w3-responsive">
      <div class="responsive">
    <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/heidemann_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Роман Гейдеман</p>
                 </div>
</div>
 </div>

    <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/m_gelvakova_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Мария Желвакова</p>
                 </div>
</div>
 </div>
 
     <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/a_kamanina_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Александра Каманина</p>
                 </div>
</div>
 </div>
 
      <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/b_weiss_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Борис Черемхин</p>
                 </div>
</div>
 </div>

      <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/d_vershinin_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Дмитрий Вершинин</p>
                 </div>
</div>
 </div>

      <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/e_proshkin_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Евгений Прошкин</p>
                 </div>
</div>
 </div>

      <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/a_kropotuhina_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Александра Кропотухина</p>
                 </div>
</div>
 </div>
      
      <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div> <!-- class="w3-tooltip"> -->
                        <img src="https://заботадетям.рф/img/team/a_zorihina_232x232.jpg" class="w3-circle" style="width:50%">
                        <p class="w3-center">Альбина Зорихина</p>
                 </div>
</div>
 </div>
    </div>
    </div>

  <!-- Rewards -->
  <div class="w3-container w3-text-grey w3-mobile w3-responsive" style="padding-top:60px" id="rewards">
    <p><h2>Благодарности</h2></p>
  </div>
      
 <div class="w3-row w3-grayscale w3-mobile">
 <div class="responsive">

<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Администрация г. Екатеринбурга</p>
                        <img src="https://заботадетям.рф/img/rewards/adm_eburg_244x350.jpg" style="width:100%">
                 </div>
</div>
 </div> 

<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">ГАУ "СРСН г. Новоуральск"</p>
                        <img src="https://заботадетям.рф/img/rewards/gau_srcn_novouralsk_247x350.jpg" style="width:100%">
                 </div>
</div>
 </div> 

<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Офицеры России</p>
                        <img src="https://заботадетям.рф/img/rewards/oficery_rossii_251x355.jpg" style="width:100%">
                 </div>
</div>
 </div>  

  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">ГУФСИН по Свердловской обл.</p>
                        <img src="https://заботадетям.рф/img/rewards/blagodarnost_gufsin_251x355.jpg" style="width:100%">
                 </div>
</div>
 </div>      
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Дом ребенка при ИК №6</p>
                        <img src="https://заботадетям.рф/img/rewards/ik_6_258x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Дом ребенка при ИК №6</p>
                        <img src="https://заботадетям.рф/img/rewards/ik_6_2_244x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">БФ "Шаги вместе"</p>
                        <img src="https://заботадетям.рф/img/rewards/blagodarnost_shagivmeste_251x353.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">ГБУ "КЦСОН Малахит"</p>
                        <img src="https://заботадетям.рф/img/rewards/blagodarnost_malahit_251x347.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
   <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Нижнесалдинский детский дом</p>
                        <img src="https://заботадетям.рф/img/rewards/N-Salda_Detdom_251x350.jpg" style="width:100%">
                 </div>
</div>
 </div>

      
   <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">СРЦ В-Салдинского района</p>
                        <img src="https://заботадетям.рф/img/rewards/V_Salda_Rehab_Center_249x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Проект стал дипломантом премии  "Гражданская инициатива"</p>
                        <img src="https://заботадетям.рф/img/rewards/diplom_strirbol_350x248.jpg" style="width:100%">
                 </div>
</div>
 </div>
  
     <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Заметка из городской газеты Верх-Нейвинский вестник</p>
                        <img src="https://заботадетям.рф/img/rewards/gazeta_319x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Благодарность Администрации г. Верх-Нейвинск</p>
                        <img src="https://заботадетям.рф/img/rewards/blag_adm_Verhneivinsk1_248x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
    <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Благодарность коллектива спортшколы им. В.Зимина</p>
                        <img src="https://заботадетям.рф/img/rewards/blag_adm_Verhneivinsk_254x350.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip"> 
                            <p class="w3-text">Проект стал дипломантом премии  "Гражданская инициатива"</p>
                        <img src="https://заботадетям.рф/img/rewards/diplom_vremya_zvetov_350x246.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
   <div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Благодарность Коррекционной школы-интернат № 78</p>
                        <img src="https://заботадетям.рф/img/rewards/blagodarnost_slepyh_254x355.jpg" style="width:100%">
                 </div>
</div>
 </div>
 
  </div>
  </div>


 <!-- Partners -->
  <div class="w3-container w3-text-grey w3-mobile w3-responsive" style="padding-top:60px" id="partners">
    <p><h2>Наши партнеры</h2></p>
  </div>
      
 <div class="w3-row w3-grayscale w3-mobile w3-responsive">
 <div class="responsive">

<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">ГУФСИН РФ по Свердловской области</p>
                        <img src="https://заботадетям.рф/img/partners/logo_gufsin.png" style="width:100%">
                 </div>
</div>
 </div> 

<div class="w3-col l3 s6">
      <div class="w3-container w3-margin-bottom">
                 <div class="w3-tooltip">
                        <p class="w3-text">Все вместе за разумную помощь</p>
                        <a href="https://stop-obman.info/deklaracia-2/" target="_blank"> <img src="https://заботадетям.рф/img/partners/logo_Vse_Vmeste.jpg" style="width:100%"> </a> 
                 </div>
</div>
 </div>  
  </div>
  </div>

<!-- Contact -->
  <footer class="w3-padding-64 w3-light-grey w3-small w3-center" style="padding-top:60px" id="contact">
    <div class="w3-row-padding">
      <div class="w3-col s6 w3-mobile">

        <h5><i class="w3-xxlarge fa fa-envelope"></i></h5>
<!--<?php session_start(); ?> -->
<form action="mail/form_captcha.php" method="post">

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="name" type="text" placeholder="Имя" value="<?=$_SESSION['res']['name']?>" />
    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-envelope-o"></i></div>
    <div class="w3-rest">
      <input class="w3-input w3-border" name="email" type="text" placeholder="Email" value="<?=$_SESSION['res']['email']?>" />
    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <textarea class="w3-input w3-border" name="message" type="text" placeholder="Текст письма" value="<?=$_SESSION['res']['message']?>" /></textarea>
    </div>
  </div>

  <div class="w3-row w3-section">
    <div class="w3-col" style="width:50px"></div>
    <div class="w3-rest" id="q">
      <input class="w3-input w3-border" name="confirm" input type="checkbox" checked>
      <label for="confirm" class="confirm"><span class="formTextRed">*</span> Если Вы не робот, уберите птичку из чекбокса</label>
    </div>
  </div>

  <p class="w3-center">
    <button class="w3-button w3-section w3-teal w3-ripple" input type="submit" name="submit"> Отправить </button>
  </p>

</form>
<?php 
    if(!empty($_SESSION['res']['error'])){
        echo "<div class='answerError'>{$_SESSION['res']['error']}</div>";

    }

    if(!empty($_SESSION['res']['ok'])){
        echo "<div class='answerOk'>{$_SESSION['res']['ok']}</div>";
    }
    unset($_SESSION['res']);
?>

      </div>
      
<!-- End Contact -->      

      <div class="w3-col s6 w3-right w3-mobile" >
        <h5><i class="fa fa-2x fa-map-marker"></i><a href="https://yandex.ru/maps/54/yekaterinburg/?mode=search&ol=biz&oid=1705118438&ll=60.633533%2C56.831388&z=16" target="_blank"> Найдите нас на карте</a></h5>
        <h5><i class="fa fa-2x fa-phone"></i> +7 (343) 262-33-86</h5>

        <a href="https://vk.com/intlcca" target="_blank"><i class="w3-badge w3-xxlarge w3-teal w3-padding fa fa-vk w3-hover-opacity"></i></a>
        <a href="https://ok.ru/group/53720915968095" target="_blank"><i class="w3-badge w3-xxlarge w3-teal w3-padding fa fa-odnoklassniki w3-hover-opacity"></i></a>
        <a href="https://www.facebook.com/zabotadetyam.ru/" target="_blank"><i class="w3-badge w3-xxlarge w3-teal w3-padding fa fa-facebook w3-hover-opacity"></i></a>
        <a href="https://www.instagram.com/zabotadetyam.ru/" target="_blank"><i class="w3-badge w3-xxlarge w3-teal w3-padding fa fa-instagram w3-hover-opacity"></i></a>
        </h5>
      </div>
 
    </div>
  </footer>

  <div class="w3-teal w3-center w3-padding-24"><P><strong> <i class="fa fa-copyright" aria-hidden="true"></i> 
  <?php echo date("Y") ?>, Благотворительный фонд "Забота и помощь детям". Все права защищены.</strong></p>
  </div>
  <!-- End page content -->

<script>
// Accordion 1
function myAccFunc() {
    var x = document.getElementById("demoAcc", "demo1");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}

// Accordion 2
function myAccFunc1() {
    var x = document.getElementById("demoAcc1", "demo1");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else {
        x.className = x.className.replace(" w3-show", "");
    }
}

// Script to open and close sidebar
function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
    document.getElementById("myOverlay").style.display = "block";
}
 
function w3_close() {
    document.getElementById("mySidebar").style.display = "none"; 
    document.getElementById("myOverlay").style.display = "none";
}

</script>

<!-- slick-slides Script -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<!-- slick-slides Script End -->

<!-- Youtube Video CSS -->
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
<!-- End Youtube Video CSS -->


</body>
</html>

Edited by Roman Heidemann
Link to comment
Share on other sites
niche Devoted Member

niche

Posted
Posted (edited)

Your code has a few width defined in pixels, but mostly 100% widths.

I'd start there.  Take every thing out and start putting it all back in one element at a time.

And, use your developer tools so you can actually see where the problem is.

Judging on those 100% widths, I'd say, mobile was an after thought.

EDIT:

I just displayed your code.  All those inline styles are definitely going to be a problem.  Especially, at 100%.  Best to abstract em out into a stylesheet.

Edited by niche
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...