• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Dla responsywności "smartfonowej" nie mogę zmieniać nic w css ?

Object Storage Arubacloud
0 głosów
228 wizyt
pytanie zadane 4 listopada 2017 w HTML i CSS przez DariuszH Gaduła (3,100 p.)

Nic się nie modyfikuje dla responsywności "smartfona" Nie wiem dlaczego. Czy ktoś mi pomoże ??

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<link rel="stylesheet" href="index.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">   
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">  
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
    
    
</head>

<body>

    
    
            
<div class="header">
     
         <div class="face"> <img src="face.png" style="widht:6vh; height:6vh; "></div> 
    
         <div class="twitter"> <img src="twitter.png" style="widht:6vh; height:6vh; "></div> 
    
    
         <div class="mail"> <img src="mail.png" style="widht:6vh; height:6vh; "></div> 
    
  
         <div class="dane">  <div class="name">DARIUSZ </div><div class="surname"> HOZER</div></div>
    
      <script>

            $(document).ready(function(){
                $(".face").each(function(){
                    $(".face").fadeIn(1800);
                    $(".twitter").fadeIn(1800);
                    $(".mail").fadeIn(1800);
                   
               
                });
             }); 
                  
                  $(document).ready(function(){
                $(".dane").each(function(){
                    $(".dane").fadeIn(1800);
                    
               
                });
             });
                  
                  
                       $(document).ready(function(){
                $(".learn").each(function(){
                    $(".html5,.css3,.jquery,.sql,.php5").fadeIn(1000);
                
               
                });
             });
      
                  
                  
          
                  
                 
                
    
            </script>
    
    
    
    
    
 </div>   
    
    
    
    
<div class="main">
    
        <div class="web_designer">WEB DESIGNER</div>  

        <div class="window_learn" >
            <div class="html5">HTML5</div>
            <div class="jquery">JQUERY</div>
            <div class="css3" style="position: relative;left: 1vh;">CSS3</div>
            <div class="php5">PHP5</div>
            <div class="sql">MySQL</div>
        </div>

    <div class="passion">PASJA TWORZENIA STRON</div>
    
    
    
    
    <script>
        
              $(document).ready(function(){
            $(".web_designer").each(function(){

                $(".web_designer").fadeIn(3000);
            });
        }); 
        
          $(document).ready(function(){
            $(".passion").each(function(){

                $(".passion").slideDown(1000);
            });
        }); 
        
        
   $(document).ready(function(){
                $(".window_learn").each(function(){
                    $(".html5,.css3,.jquery,.sql,.php5").fadeIn(1000);
                });
       
   });
    
    
    
    
    </script>
  
   
    
    
    </div>

 

body{
    width:100%;
    margin: 0;
    
    
}
@media (max-width: 599px){
    

.header
{
    position: fixed;
    z-index: 100;

    width: 100%;
    height: 11vh;

    background-color: black;
    background-size: 100% 100%;
}
    
    
    
 
.face,
.twitter,
.mail
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-right: 1vh;
    margin-left: 1.5vh;
}


.face:hover,
.mail:hover,
.twitter:hover
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-left: 1.5vh;

    border: 1px solid aqua;
    border-radius: 10%;
}
    
  
.dane
{
    float: right;

    width: 7.2vh;
    height: 5vh;
    margin-top: 3vh;
    margin-right: 5vh;
}


    
    .name
{
    font-family: 'Montserrat', sans-serif;
    font-size: 1.7vh;

    display: inline;

    color: aliceblue;
}



.surname
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 1.7vh;

    display: inline;
    float: right;

    color: silver;
}

    
.window_learn
{
    display: none;
    
}
    
       
    
    
  
.web_designer
{
    font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    font-weight: 800;

    position: relative;
    top: 50vh;
    left:14%;

    display: none;
    
    
    width: 60%;
    height: 40vh;

    text-align: center;

    color: orangered;
}

    
 

.passion
{
    font-family: 'Roboto', sans-serif;
    font-family: 'Abel', sans-serif;
    font-size: 3.1vh;
    font-weight: 500;

    display: inline;
    float: left;

    width: 50%;
    height: 15vh;
    margin-top: 40vh;
    margin-left: 25%;

    text-align: center;
} 
 
 


 
    
}









@media (min-width: 599px) {
    
    
 
.header
{
    position: fixed;
    z-index: 100;

    width: 100%;
    height: 11vh;

    background-color: black;
    background-size: 100% 100%;
}

  
    



.face,
.twitter,
.mail
{
    float: left;
    
    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-right: 1vh;
    margin-left: 1.5vh;
    
    
    
    display: none;
}



.face:hover,
.mail:hover,
.twitter:hover
{
    float: left;

    width: 6vh;
    height: 6vh;
    margin-top: 2.4vh;
    margin-left: 1.5vh;

    border: 1px solid aqua;
    border-radius: 10%;
}


.dane
{
    float: right;

    width: 24vh;
    height: 10vh;
    margin-top: 4vh;
    margin-right: 3vh;
}

    
 
.name
{
    font-family: 'Montserrat', sans-serif;
    font-size: 2.7vh;

    display: inline;

    color: aliceblue;
}




.surname
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 2.7vh;

    display: inline;
    float: right;

    color: silver;
}

    

.window_learn
{
    position: absolute;
    top: 43vh;
    left: 31%;

    width: 59%;
    height: 12vh;animation: mymove 2s ;
    animation-iteration-count: 1; 
}
    
   @-webkit-keyframes mymove {
    0%   {top: 0vh;}
    50%   {top: 0vh;}
    100% {top: 43vh;}
} 
    
    
 
.html5,
.css3,
.jquery,
.sql,
.php5
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 3vh;
    line-height: 13vh;

    display: none;
    float: left;

    width: 12vh;
    height: 13vh;
    margin-left: 2vh;

    text-align: center;

    color: #444;
    
   
}
 

.html5:hover,
.css3:hover,
.jquery:hover,
.sql:hover,
.php5:hover
{
    font-family: 'Archivo Black', sans-serif;
    font-size: 3vh;
    line-height: 13vh;

    float: left;

    width: 12vh;
    height: 13vh;
    margin-left: 2vh;

    text-align: center;

    color: darkturquoise;
    border-radius: 100%;
}

    
    
    
}


.web_designer
{
    font-family: 'Roboto', sans-serif;
    font-size: 11vh;
    font-weight: 800;

    position: relative;
    top: 50vh;
    left:18%;

    display: none;
    
    
    width: 60%;
    height: 10vh;

    text-align: center;

    color: orangered;
}

 
.passion
{
    font-family: 'Roboto', sans-serif;
    font-family: 'Abel', sans-serif;
    font-size: 3.5vh;
    font-weight: 500;

    display: inline;
    display: none;
    float: left;

    width: 50%;
    height: 15vh;
    margin-top: 50.7vh;
    margin-left: 29.5%;

    text-align: center;
    letter-spacing: 0.75vh;
    word-spacing: .1vh;
}

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
}

 

 

 

 

2 odpowiedzi

0 głosów
odpowiedź 4 listopada 2017 przez pablop76 VIP (123,180 p.)
Witam. Wyrażenia @media działa , więc nie wiem  w czym problem?
 komentarz 4 listopada 2017 przez DariuszH Gaduła (3,100 p.)
Zminimalizuj sobie przeglądarkę. Nie ma możliwośći modyfikacji "web design" (zmiana wielkości itp)
 komentarz 4 listopada 2017 przez pablop76 VIP (123,180 p.)
Wstawiłem inne tło dla body twoich media i działa.
 komentarz 4 listopada 2017 przez DariuszH Gaduła (3,100 p.)

Spójrz jak to wygląda :) Chciałbym mniejsze i na środku i nad "pasja......"

 komentarz 4 listopada 2017 przez DariuszH Gaduła (3,100 p.)
Po prostu ten selektor nie reaguje :)
 komentarz 4 listopada 2017 przez pablop76 VIP (123,180 p.)

zwiększ moc selektora

.main .web_designer{

}

 

 komentarz 4 listopada 2017 przez DariuszH Gaduła (3,100 p.)
Też tak robiłem, dzialało, ale nie rozumiem dlaczego ? :) Skąd te zwiększenie "mocy" selektora ? Rodzic dziecko ? :) Dlaczego inne selektory działają i dają się modyfikować a akurat ten nie ? :)
 komentarz 4 listopada 2017 przez pablop76 VIP (123,180 p.)

Selektory są punktowane w hierarchii. przeczytaj

 komentarz 4 listopada 2017 przez DariuszH Gaduła (3,100 p.)
Mam jeszcze jedno pytanko. Podczas zmniejszania szerokości okna  element. window_learn ("html css jquery sql") przesuwa się a nie powinien. Jak go  uspokoić ? :)
 komentarz 5 listopada 2017 przez pablop76 VIP (123,180 p.)
Twoje style nie zachowują się poprawnie ponieważ są nie precyzyjne. Masz wstawione style inline co w ogóle przekreśla ich możliwosć nadpisywania, chyba, ze użyjesz !important co nie jest zalecane. Pozycjonowanie relative ze zmiana położenia jest trudne do opanowania przy responsywności. position: relative; stosuje się przede wszystkim do ustanowienia kontenera dla jego zawartości.
 komentarz 6 listopada 2017 przez DariuszH Gaduła (3,100 p.)
Przemyślałem sprawę. Robię już dobrze :) Wersja komórkowa i deskoptowa jest ok i przejscie z jednej do drugiej też poprawione. Wystarczyło media query dać w przedziale od do (od smartfona do komputera) i wstawić display:none :) Dzięki za te rady odnośnie pozycjonowania  :)
0 głosów
odpowiedź 6 maja 2019 przez Dajm Nowicjusz (160 p.)
Spróbuj usunąć to type=text/css linku do styli css moze to cos da

Podobne pytania

0 głosów
1 odpowiedź 489 wizyt
Jak zbudować responsywne style css media queries
pytanie zadane 17 grudnia 2017 w HTML i CSS przez stasiek_retro Nowicjusz (140 p.)
0 głosów
0 odpowiedzi 127 wizyt
Flexbox zmiejszanie elementu media queries
pytanie zadane 8 stycznia 2018 w C i C++ przez Xenoxer Użytkownik (560 p.)
0 głosów
1 odpowiedź 145 wizyt
Media Queries - zamiana/ nadanie nowych atrybutów dla ID/klasy
pytanie zadane 24 stycznia 2018 w HTML i CSS przez shy_fox Gaduła (4,320 p.)

92,565 zapytań

141,418 odpowiedzi

319,604 komentarzy

61,952 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...