Media Queries CSS

#1
Cosmin4sul

Posted 25 August 2018 - 22:51

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Salut.

Tocmai ce am terminat de editat primul meu site si am întâmpinat o problemă după ce l-am făcut public. Problema este la afișarea acestuia pe mobil. Am editat in Css @media screen and (max-width: 360px){} [Atâți pixel are telefonul meu in Css] si cand deschid site-ul pe mobil nu imi afișează dimensiunile corecte,chiar dacă offline se vede bine (am făcut dimensiule după tools-ul chrome-ului pentru telefon si de pe browserul blisk special pentru "mobile vision" ). Ma poate ajuta cineva care se pricepe? Sa găsim o modalitate de a putea vedea ce am editat până acum si sa imi gaseasca problema. Am incercat in nenumarate feluri sa schimb dar nimic. Voi lăsa un link cu 2 poze ca sa vedeti despre ce este vorba. Prima este cum ar trebui să arate iar a doua cum arată de fapt. https://imgur.com/a/xnCnaOv

Edited by Cosmin4sul, 25 August 2018 - 22:52.

Back to top

#2
Extinct

Posted 25 August 2018 - 23:15

Senior Member

Grup: Senior Members
Posts: 9,079
Înscris: 24.02.2007

Cosmin4sul, on 25 august 2018 - 22:51, said:

Salut.

Tocmai ce am terminat de editat primul meu site si am întâmpinat o problemă după ce l-am făcut public. Problema este la afișarea acestuia pe mobil. Am editat in Css @media screen and (max-width: 360px){} [Atâți pixel are telefonul meu in Css] si cand deschid site-ul pe mobil nu imi afișează dimensiunile corecte,chiar dacă offline se vede bine (am făcut dimensiule după tools-ul chrome-ului pentru telefon si de pe browserul blisk special pentru "mobile vision" ). Ma poate ajuta cineva care se pricepe? Sa găsim o modalitate de a putea vedea ce am editat până acum si sa imi gaseasca problema. Am incercat in nenumarate feluri sa schimb dar nimic. Voi lăsa un link cu 2 poze ca sa vedeti despre ce este vorba. Prima este cum ar trebui să arate iar a doua cum arată de fapt. https://imgur.com/a/xnCnaOv

Adauga-i chestia asta in head:

<meta name="viewport" content="width=device-width, initial-scale=1">

Back to top

#3
Bogdan09

Posted 26 August 2018 - 11:07

Junior Member

Grup: Members
Posts: 61
Înscris: 18.05.2006

Pe langa ce a spus colegul Extinct sa adaugi in html adauga asta in css:
* {
box-sizing: border-box
}
Sunt chestiile de baza pt mobile responsive.
Totodata ai putea folosi si asta un al doilea fisier reset.css, nu gasesc butonul pt atasat fisiere, asa ca adaug aici codul:

/*CSS reset code*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

Edited by Bogdan09, 26 August 2018 - 11:08.

Back to top

#4
Cosmin4sul

Posted 26 August 2018 - 11:29

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Codul de resetare l-am folosit de la început pentru ca sa fie css cu setarile default pentru că am scris niste coduri in css inainte sa incep sa editeze site-ul.O sa incerc sa adaug codurile voastre si o sa revin cu un răspuns.

Back to top

#5
Cosmin4sul

Posted 26 August 2018 - 12:43

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Bogdan09 ,codul * { box-sizing: border-box } îl adaug in @media sau doar in css?

Back to top

#6
Bogdan09

Posted 26 August 2018 - 13:00

Junior Member

Grup: Members
Posts: 61
Înscris: 18.05.2006

doar in css, conform celor de la w3s asta ar fi prima linie din css cu care incepi.

Back to top

#7
unbrutus

Posted 26 August 2018 - 13:15

Guru Member

Grup: Senior Members
Posts: 16,256
Înscris: 23.02.2017

Bogdan09, on 26 august 2018 - 11:07, said:

Pe langa ce a spus colegul Extinct sa adaugi in html adauga asta in css:
* {
box-sizing: border-box
}
Sunt chestiile de baza pt mobile responsive.

box-sizing nu are nici o influenta asupra comportamentului responsive al unui site

Extinct, on 25 august 2018 - 23:15, said:

Adauga-i chestia asta in head:

<meta name="viewport" content="width=device-width, initial-scale=1">

asta e cel mai probabil solutia. Pt un raspuns complet, ar trebui sa vedem ce faci tu acolo.
Pt a arata ce faci tu acolo, foloseste http://jsfiddle.net/ si posteaza linkul cu tot codul tau... daca inveti sa folosesti jsfiddle ai invatat deja f mult

Back to top

#8
Cosmin4sul

Posted 26 August 2018 - 13:24

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Momentan nu sunt acasă băieți, cand ajung acasa incerc codurile si va spun daca s-a rezolvat sau nu

Back to top

#9
Cosmin4sul

Posted 26 August 2018 - 16:24

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Multumesc mult Extinct, asta era problema, nu aveam adaugat la paginile html acel cod si de aceea nu imi afisa. O zi frumoasa.

Back to top

#10
Cosmin4sul

Posted 26 August 2018 - 18:12

New Member

Grup: Junior Members
Posts: 22
Înscris: 28.01.2015

Revin cu încă o problemă..de data aceasta este in legătură cu modul landscape pentru iphone-uri/ipade-uri. Pentru cele cu android pot sa editez si imi afișează corespunzător folosind codul " @media screen and (max-width: 640px) and (orientation: landscape){}" dar pentru iphone-uri nu se schimba nici o setare. Care ar putea fi problema? am incercat mai multe coduri de pe internet dar tot nu am rezolvat.

Edited by Cosmin4sul, 26 August 2018 - 18:13.

Back to top

#11
unbrutus

Posted 26 August 2018 - 20:32

Guru Member

Grup: Senior Members
Posts: 16,256
Înscris: 23.02.2017

deja ti-am zis ce ai de facut, daca esti baiat destept faci ce ti-am zis si ai invatat ceva util pe viata: jsfiddle.
Go for it

Back to top

Anunturi

Neurochirurgie minim invazivă

"Primum non nocere" este ideea ce a deschis drumul medicinei spre minim invaziv.

Avansul tehnologic extraordinar din ultimele decenii a permis dezvoltarea tuturor domeniilor medicinei. Microscopul operator, neuronavigația, tehnicile anestezice avansate permit intervenții chirurgicale tot mai precise, tot mai sigure. Neurochirurgia minim invazivă, sau prin "gaura cheii", oferă pacienților posibilitatea de a se opera cu riscuri minime, fie ele neurologice, infecțioase, medicale sau estetice.

www.neurohope.ro

Media Queries CSS

#1 Cosmin4sul Posted 25 August 2018 - 22:51

#2 Extinct Posted 25 August 2018 - 23:15

#3 Bogdan09 Posted 26 August 2018 - 11:07

#4 Cosmin4sul Posted 26 August 2018 - 11:29

#5 Cosmin4sul Posted 26 August 2018 - 12:43

#6 Bogdan09 Posted 26 August 2018 - 13:00

#7 unbrutus Posted 26 August 2018 - 13:15

#8 Cosmin4sul Posted 26 August 2018 - 13:24

#9 Cosmin4sul Posted 26 August 2018 - 16:24

#10 Cosmin4sul Posted 26 August 2018 - 18:12

#11 unbrutus Posted 26 August 2018 - 20:32

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
Cosmin4sul

Posted 25 August 2018 - 22:51

#2
Extinct

Posted 25 August 2018 - 23:15

#3
Bogdan09

Posted 26 August 2018 - 11:07

#4
Cosmin4sul

Posted 26 August 2018 - 11:29

#5
Cosmin4sul

Posted 26 August 2018 - 12:43

#6
Bogdan09

Posted 26 August 2018 - 13:00

#7
unbrutus

Posted 26 August 2018 - 13:15

#8
Cosmin4sul

Posted 26 August 2018 - 13:24

#9
Cosmin4sul

Posted 26 August 2018 - 16:24

#10
Cosmin4sul

Posted 26 August 2018 - 18:12

#11
unbrutus

Posted 26 August 2018 - 20:32