как создать мобильную версию( Responsive Web Design)

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

[KVA]

Bootstrap может?

https://getbootstrap.com/

[solution]

Bootstrap может?

https://getbootstrap.com/

Это ведь Framework?
Было сказано не использовать никаких Framework.
Я в общем то представляю как изменить HTML-надо одну линию кода добавить:

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

Но непонятно как изменить css...
Можно также использовать grid ot flex boxes.
На browser должно выглядеть как одна колонка вместо нескольких.
Any ideas?

[BronenosezPotemkin]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

[solution]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

Или как внизу где 1 - для мобильника

а 2 - для лаптопа/десктопа.

Правильно мыслю?

Что Structure(внизу) подразумевает?

Ну это явно не цвет(color) и что ещё "не" ?
написано что Structure это Layout.....
Что это значит?


/* Structure */

//1

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}


//2
@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

[Komissar]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

ты, мать, прохраммистка шо ли?

[ie]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

https://www.w3schools.com/html/html_responsive.asp

ну и как сказали уже bootstrap вам облегчит жизнь,
особенно если на страницых много всяких вложеных таблиц и т.д.

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

ты, мать, прохраммистка шо ли?

Нет...я только учусь.
У меня сыновья программисты.
Но с другом стороны я создала Wordpress sides(вебсайты) используя фотографиями их и их семей и другие что им и не снилось.
Просто я знаю как делать фотографии и компоновать их используя Wordpress.

[solution]

Кто нибудь знает или может дать совет, руководство как создать Responsive Web Design - страничку для мобильного телефона?
Есть страничка с html и css и надо изменить её для мобильника.
спасибо.

https://www.w3schools.com/html/html_responsive.asp

ну и как сказали уже bootstrap вам облегчит жизнь,
особенно если на страницых много всяких вложеных таблиц и т.д.

Очень хороший пример.
спасибо.
Может ещё знаете что значит структура в css и вообще можно ли быстро освоить эти html + css не перелопачивая весь курс.

[BronenosezPotemkin]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

Или как внизу где 1 - для мобильника

а 2 - для лаптопа/десктопа.

Правильно мыслю?

Что Structure(внизу) подразумевает?

Ну это явно не цвет(color) и что ещё "не" ?
написано что Structure это Layout.....
Что это значит?


/* Structure */

//1

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}


//2
@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

У вас #1 для мобильника, #2 для всего остального. Structure ничего не подразумевает, это просто комментарий, который написал тот, кто делал эту страницу. Можете это удалить или написать что-то другое, ничего не изменится.

[solution]

Нужно использовать media query, например:

@media screen and (max-device-width: 480px) {
[class*="your div class"] {
width: 100%;
}
}

У вас #1 для мобильника, #2 для всего остального. Structure ничего не подразумевает, это просто комментарий, который написал тот, кто делал эту страницу. Можете это удалить или написать что-то другое, ничего не изменится.

Пример которому надо следовать с css внизу(может там какие то неточности)...

разница: надо не 3 а 2 column, т.е надо вероятно 960/2 остальное похоже.

Непонятно для мобильника:

.header { display: none; }

1.Что .header не показан?

Разница между мобильником и остальными:

//мобилник
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}

//остальные

.column {
margin: 10px 10px 0 0;
}

2. Почему у остальных нет border-bottom и другая нестыковка?

спасибо.

//rxample

/* Desktop, fixed width CSS */


/* Reset */

* {
margin: 0;
padding: 0;
}


body {
background: #f9f3e9;
color: #594846;
font-family: "Adobe Caslon Pro", Georgia, "Times New Roman", serif;
font-size:100%;
}

a, a:visited {
color: #42628F;
}

p {
margin: 0.5em 0.25em;
}

h1 {
font-size: 1.75em;
border: solid #594846;
border-width: 2px 0;
padding: 0.25em;
text-align: center;
font-variant: small-caps;
}

h2 {
text-align: center;
font-variant: small-caps;
}

dl {
margin: 0 0.5em;
}

dt {
font-weight: bold;
margin: 0.5em 1em 0.5em 0;
border-bottom: 1px dashed #7b96bc;
}

.intro {
font-size: 1.15em;
line-height: 1.3em;
text-align: justify;
margin: 0.5em;
font-weight: bold;
}
.navigation {
background-color:#7b96bc;
border-bottom: 2px solid #594846;
overflow:auto;
}

.navigation ul li {
text-align: center;
display: block;
float: left;
padding: 0.25em 0;
}

.navigation li a {
color: #f9f3e9;
font-variant: small-caps;
text-decoration: none;
}

.header p {
margin-left: -1000px;
}

#points ul {
list-style-image: url('images/point.png');
margin: 0.5em 0 1em 0.5em;
padding-left: 1em;
}

#points ul li {
margin: 0.5em 1em;
}

.footer {
background-color: #7b96bc;
color: #f9f3e9;
text-align: center;
padding: .5em 0;
font-style: italic;
}

img, iframe {max-width:100%;}

/* Structure */

@media screen and (max-width:480px) {
.header { display: none; }
body, .footer, .navigation {width:100%;}
.column {margin: 10px 0; border-bottom:1px dashed #7b96bc;}
.navigation ul li {width: 100%; /* 33.33334375%; */}
#visit, #points, #main {width:100%;}
}

@media screen and (min-width:481px) {
body, .header, .navigation, .footer {
width: 100%;
}

.header, .navigation, .footer {
clear: both;
}

.column {
margin: 10px 10px 0 0;
}

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 33.33333%; /* 960/3 */
}

.header {
background:url(images/w.png) no-repeat;
height: 200px;
}

#visit {
width: 25%;
float: left;
}

#points {
width: 25%;
float: right;
}

#main {
margin: 10px 27.08333% 0 26.04166%;
}
}

[BronenosezPotemkin]

CSS делается под конкретный сайт.
1. Да, обычно header с навигацией на мобильнике не показывают, вместо этого пишется выпадающее меню.
2. Всё остальное тоже показывается/скрывается, дорисовывается, меняются размеры в зависимости от необходимости. Тут нет общих правил.

[solution]

CSS делается под конкретный сайт.
1. Да, обычно header с навигацией на мобильнике не показывают, вместо этого пишется выпадающее меню.
2. Всё остальное тоже показывается/скрывается, дорисовывается, меняются размеры в зависимости от необходимости. Тут нет общих правил.

Ну хотя css для страниц разный но в переводе их на мобил всё же что то должно быть общее:
Например:
1.
прибавить для мобил:
@media screen and (max-width:480px)
прибавить для остальных:
@media screen and (min-width:481px)

2.
Посмотреть на первоначальный код и
изменить для мобил в % и для остальных в px.

Но тут не всё ясно для остальных....
Почему в начальной странице было в px а в измеренной для остальных частично в px а частично в %?
Почему не всё в %?


//первоначальный код

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 320px; /* 960/3 */
}
#visit {
width: 240px;
float: left;
}

#points {
width: 240px;
float: right;
}

#main {
margin: 10px 260px 0 250px;
width: 460px;
}

//измеренной код для остальных:

.navigation {
min-height: 25px;
}

.navigation ul li {
width: 33.33333%; /* 960/3 */
}



#visit {
width: 25%;
float: left;
}

#points {
width: 25%;
float: right;
}

#main {
margin: 10px 27.08333% 0 26.04166%;
}

[ie]

Может ещё знаете что значит структура в css

низнаю что такое структура...

вообще можно ли быстро освоить эти html + css не перелопачивая весь курс.

амммм... в принципе да. ничего там сложного нет.
но конечно зависит от конкретного ч-ка. если времени нет учить все подрят.
я бы посоветовал разобраться в базовых понятиях,
потом копать только то что конкретно нужно.
вопще bootsrap должен облегчить жизнь...
иначи придется писать эти "media screen", и все очень быстро выходит из под контроля...
if you know what i mean.

[ie]

и в догонку, у нас тут был один вэб девелопер, любил размеры имажей указыват типа width:200px, height:100px
что в responsive environment не работает, как вы понимаете.

все должно быть вот так width: 100% ну или там 50% в процентах вопщем.
а высота сама подстроится и картинка тагда поулчается пропорциональной на любом экране
и колдовать с размерами не надо, даже кагда файл меняется.
если надо ограничить размер max-width min-width.

[BronenosezPotemkin]

Почему не всё в %?

Не все можно в % делать, особенно height, как в ваших примерах. Ширину li или, например, select частенько приходится задавать в px или в pt, или в если не сам width, то min-width/max-width, чтобы добиться нужной презентации на странице. Если вы посмотрите на те же css bootstrapa, то увидите то же самое.

[ie]

Не все можно в %

trust me.

Ширину li или, например, select частенько приходится задавать в px или в pt, или в если не сам width, то min-width/max-width, чтобы добиться нужной презентации на странице. Если вы посмотрите на те же css bootstrapa, то увидите то же самое.

да. такой подход имеет место быть.
но как по мне слишко много этих маленьких never ending adjustments...
при таком подходе.

[solution]

Может ещё знаете что значит структура в css

низнаю что такое структура...

.................

я имела ввиду Structure что должна быть под media screen(см. внизу)
Я должна выбрать Structure из кода и воткнуть под media screen.
Идём от противного: что не Structure и что надо пропускать?

вероятно color, img, list, .....
что ещё не Structure?
Или(может легче) что Structure?

/* Structure */

@media screen an *
{
.......
}

Кстати Wordpress автоматически переходит на мобильную версию - надо только нажать кнопку "mobil"... и с css я там не сталкивалась чтобы переделывать - надо только выбрать подходящую theme.
Но вот с theme - проблемы бывают и чтоб создать свою theme вероятно надо знать css и html.
Вы знакомы с Wordpress ?

[ie]

что не Structure и что надо пропускать?

нуу аааммм... да все можно пропускать.
идея такая. есть у вас допустим таблица
id="my-table"

вы хотите чтоб она на смартфоне была шириной 100px

пишите

@media screen and (max-width:480px)
{
#my-table {
width: 100px
}
}

такие вот дела.

Кстати Wordpress автоматически переходит на мобильную версию - надо только нажать кнопку "mobil"... и с css я там не сталкивалась чтобы переделывать - надо только выбрать подходящую theme.

ну отлично. может не стоит заморачиваться со этой все этой респонсив герундой?

Вы знакомы с Wordpress ?

аммм лично нет. но наслышан.

[solution]

Почему не всё в %?

Не все можно в % делать, особенно height, как в ваших примерах. Ширину li или, например, select частенько приходится задавать в px или в pt, или в если не сам width, то min-width/max-width, чтобы добиться нужной презентации на странице. Если вы посмотрите на те же css bootstrapa, то увидите то же самое.

Как насчёт device-width и может ли это заменить:
width или min-width/max-width

//device-width

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

Мне надо изменить страницу(внизу) для мобильника.

Должна ли я следовать примеру(раньше показывала) или проще использовать grid or flexbox?




body, h1, h2, h3, p, img, ul, li{
border:0; margin:0; padding:0;
}
/*the above is a very basic reset rule. Every browser has a slightly different default for HTML tags. By using this simple CSS reset, all the more glaring styles
are reset and can now be set to whatever properties that would suit your website best. */

body{
background:#eaf8fb; /* a light blue background color. */
font-family:Arial, Helvetica, sans-serif; /* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */
font-size:13px; /* all normal text on the web page has a base font size of 14px now */
}

p{
letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
line-height:21px; /* line height sets the vertical spacing between lines of text. */
}

div#header{
background-color:#333; /* a more specific way to set a background color */
background-image:url(images/headerbkgd.png); /* sets a background image in the header and the position it should sit */
background-repeat:no-repeat; /* sets a background image to repeat, repeat-x, repeat-y or not at all as written in this rule */
background-position:left bottom;/* sets a background image position */
color:#fff; /* sets the the color of all header text to white */
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; /* these 6 lines of border-radius code make rounded corners for the bottom work in firefox, safari, chrome, opera and IE9 */
margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
min-height:130px; /* setting a minimum height of an element means that it can grow to be bigger, if there is a lot of content in it. However, if it doesn't have enough content, it will be at the very least (in this example) 130 pixels tall */
padding:45px 15px 15px; /* by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller. In this case, the header div is now 15px wider and taller on each side. */
width:870px; /* sets the width of the div to 900px. Remember that if you add padding to this element it will increase the size by the number of pixels in the padding. In this example the width is 900px and we have 15px to the left and right so the total width of the header will be (870px + 15px+15px=930px */

}

ul.navigation {
list-style:none; /* this removes the bullets from list elements */
margin-top:20px; /* giving the ul a top margin of 20px */
}

ul.navigation li{
display:inline-block; /* an inline block element can have width and height applied to it / and if not, they only take up as much space as the content within allows */
margin:0 3px 5px; /* this code adds a 3px margin to the left and right of the list elements, and 5px to the bottom of the list elements */
}

ul.navigation li a{
background:#4a4a4a; /* this is a dark grey background for the link */
color:#fff; /* this makes the link text white */
-moz-border-radius:2px;
webkit-border-radius:2px;
border-radius:2px; /* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
padding:3px 10px; /* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
text-decoration:none; /* this removes the normal underline that links usually have */
}

ul.navigation li a:hover{
background-color:#000; /*this is a hover pseudo class. By designating a different background color, than the class for the a tag above, when a mouse hovers over these particular links, in the navigation bar, the background color will change to what's defined here */

}

div.content{
margin:15px auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content. The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
width:900px;
}

div.col-right{
float:right;
width:660px
}

div.sidebar-left{
float:left;
padding:0 10px;
width:200px; /* when floating content next to each other, applying set widths will make the content play nice with each other. Change the width of the siebar, or take away the width of the above "div.col-right" and see what happens to get a better idea of how widths effect floats */
}

div.sidebar-left a{
color:#445e64; /* this redefines all links in the left sidebar to this new color, as opposed to the default blue link color */
}

div.sidebar-left a:hover{
text-decoration:none
} /* when hovering over a link, in the sidebar, this turns off the underline */

.list{
border-bottom:1px solid #c3dce1; /* adds a border to the bottom of the list to further divide the content for eaier segragation */
padding:0 0 20px 15px; /* adds spacing to the bottom of the list to further divide the content for eaier segragation */
}
.list li{
margin-bottom:10px
}
.list li a{
font-weight:bold; /* this makes all anchor classes with .list bold without using <strong> */
text-transform:uppercase; /* this makes all anchor classes with .list uppercase */
font-size:11px; /* this makes all anchor classes with .list applied 11px tall */
}

div#footer{
background-color:#c4d5d9;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left{
float:left; /* use this on an element (like an image) to make it float to the left of it's containing HTML element */
margin:0 10px 10px 0;
}
.float-right{
float:right; /* use this on an element (like an image) to make it float to the right of it's containing HTML element */
}
.float-right img{
margin:0 0 10px 10px; /* use this on an element (like an image) to make it float to the right of it's containing HTML element */
}
.clear{
clear:both; /* this clears floats. This would be used to cancel out a float's behavior on content below it. */
}

[solution]

что не Structure и что надо пропускать?

нуу аааммм... да все можно пропускать.
идея такая. есть у вас допустим таблица
id="my-table"

вы хотите чтоб она на смартфоне была шириной 100px

пишите

@media screen and (max-width:480px)
{
#my-table {
width: 100px
}
}

такие вот дела.

Кстати Wordpress автоматически переходит на мобильную версию - надо только нажать кнопку "mobil"... и с css я там не сталкивалась чтобы переделывать - надо только выбрать подходящую theme.

ну отлично. может не стоит заморачиваться со этой все этой респонсив герундой?

Вы знакомы с Wordpress ?

аммм лично нет. но наслышан.

Там в Wordpress я использую галлереи.
так вот в Safari первые 2-3 секунд картинки становятся непропорциональными(большими) - в мобильной версии -нормально.
Надо может как то приспособить мобильную версию..
Также на FireFox и Xrome - нет проблем.
Может надо заново download Safari..
..хотя на Мак - и но updating need...


Мне надо изменить страницу(внизу) для мобильника.

Должна ли я следовать примеру(раньше показывала) или проще использовать grid or flexbox?



//need to add. mobile as below

body, h1, h2, h3, p, img, ul, li{
border:0; margin:0; padding:0;
}
/*the above is a very basic reset rule. Every browser has a slightly different default for HTML tags. By using this simple CSS reset, all the more glaring styles
are reset and can now be set to whatever properties that would suit your website best. */

body{
background:#eaf8fb; /* a light blue background color. */
font-family:Arial, Helvetica, sans-serif; /* the font family for all text on the web page is now either arial, helvetica or a sans-serif font if those two are not available */
font-size:13px; /* all normal text on the web page has a base font size of 14px now */
}

p{
letter-spacing:.04em; /* letter spacing sets the horizontal spacing (kerning) between letters in a block of text. */
line-height:21px; /* line height sets the vertical spacing between lines of text. */
}

div#header{
background-color:#333; /* a more specific way to set a background color */
background-image:url(images/headerbkgd.png); /* sets a background image in the header and the position it should sit */
background-repeat:no-repeat; /* sets a background image to repeat, repeat-x, repeat-y or not at all as written in this rule */
background-position:left bottom;/* sets a background image position */
color:#fff; /* sets the the color of all header text to white */
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; /* these 6 lines of border-radius code make rounded corners for the bottom work in firefox, safari, chrome, opera and IE9 */
margin:0 auto; /* by declaring a width on any block element (like a div), giving it a css property of margin:0 auto will center that block element on page */
min-height:130px; /* setting a minimum height of an element means that it can grow to be bigger, if there is a lot of content in it. However, if it doesn't have enough content, it will be at the very least (in this example) 130 pixels tall */
padding:45px 15px 15px; /* by setting a padding, the content within a HTML element will not touch the edges of that element (by adding padding to an element, it actually makes that element appear wider and/or taller. In this case, the header div is now 15px wider and taller on each side. */
width:870px; /* sets the width of the div to 900px. Remember that if you add padding to this element it will increase the size by the number of pixels in the padding. In this example the width is 900px and we have 15px to the left and right so the total width of the header will be (870px + 15px+15px=930px */

}

ul.navigation {
list-style:none; /* this removes the bullets from list elements */
margin-top:20px; /* giving the ul a top margin of 20px */
}

ul.navigation li{
display:inline-block; /* an inline block element can have width and height applied to it / and if not, they only take up as much space as the content within allows */
margin:0 3px 5px; /* this code adds a 3px margin to the left and right of the list elements, and 5px to the bottom of the list elements */
}

ul.navigation li a{
background:#4a4a4a; /* this is a dark grey background for the link */
color:#fff; /* this makes the link text white */
-moz-border-radius:2px;
webkit-border-radius:2px;
border-radius:2px; /* these 3 lines of border-radius code make rounded corners work in firefox, safari, chrome, opera and IE9 */
border:1px solid #595959; /* this adds a light grey solid border of 1px width around the link */
padding:3px 10px; /* as the name implies, this adds extra padding around the link, so that the borders don't bump up against the link text */
text-decoration:none; /* this removes the normal underline that links usually have */
}

ul.navigation li a:hover{
background-color:#000; /*this is a hover pseudo class. By designating a different background color, than the class for the a tag above, when a mouse hovers over these particular links, in the navigation bar, the background color will change to what's defined here */

}

div.content{
margin:15px auto; /* this adds a margin of 15px to the top and bottom of the div with the class of content. The auto margin applies to the left and right side of the div which is what centers the div in the middle of the page. */
width:900px;
}

div.col-right{
float:right;
width:660px
}

div.sidebar-left{
float:left;
padding:0 10px;
width:200px; /* when floating content next to each other, applying set widths will make the content play nice with each other. Change the width of the siebar, or take away the width of the above "div.col-right" and see what happens to get a better idea of how widths effect floats */
}

div.sidebar-left a{
color:#445e64; /* this redefines all links in the left sidebar to this new color, as opposed to the default blue link color */
}

div.sidebar-left a:hover{
text-decoration:none
} /* when hovering over a link, in the sidebar, this turns off the underline */

.list{
border-bottom:1px solid #c3dce1; /* adds a border to the bottom of the list to further divide the content for eaier segragation */
padding:0 0 20px 15px; /* adds spacing to the bottom of the list to further divide the content for eaier segragation */
}
.list li{
margin-bottom:10px
}
.list li a{
font-weight:bold; /* this makes all anchor classes with .list bold without using <strong> */
text-transform:uppercase; /* this makes all anchor classes with .list uppercase */
font-size:11px; /* this makes all anchor classes with .list applied 11px tall */
}

div#footer{
background-color:#c4d5d9;
margin:0 auto;
padding:15px;
text-align:center;
width:900px;
}
.float-left{
float:left; /* use this on an element (like an image) to make it float to the left of it's containing HTML element */
margin:0 10px 10px 0;
}
.float-right{
float:right; /* use this on an element (like an image) to make it float to the right of it's containing HTML element */
}
.float-right img{
margin:0 0 10px 10px; /* use this on an element (like an image) to make it float to the right of it's containing HTML element */
}
.clear{
clear:both; /* this clears floats. This would be used to cancel out a float's behavior on content below it. */
}

[ie]

Там в Wordpress я использую галлереи.

галлереи это я так понимаю какие-то префабрикейтед CSS?
может есть возможность поговорить с теми кто создал эти галлереи?

так вот в Safari первые 2-3 секунд картинки становятся непропорциональными(большими) - в мобильной версии -нормально.

первые три секунды картинки непропорциональны а потом все выстраевается?
может просто CSS файл попробовать загружать как можно раньше?

[BronenosezPotemkin]

Как насчёт device-width и может ли это заменить:
width или min-width/max-width

//device-width

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

Мне надо изменить страницу(внизу) для мобильника.

Должна ли я следовать примеру(раньше показывала) или проще использовать grid or flexbox?

Страница это прежде всего html, невозможно менять css, не глядя на html. А в ваших примерах один только css.
Разумеется, работать с bootstrap grid system, flex гораздо проще, чем писать всё с нуля. Но вы же, наверное, не свой вордпрес сервер устанавливаете, а пользуетесь их домейном и готовыми страницами? Я не работаю с вордпрес, но мне кажется, если вы берете стандартный вордпресовский темплейт, там всё это должно уже быть. Это как бы последние must have.

[solution]

Как насчёт device-width и может ли это заменить:
width или min-width/max-width

//device-width

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

Мне надо изменить страницу(внизу) для мобильника.

Должна ли я следовать примеру(раньше показывала) или проще использовать grid or flexbox?

Страница это прежде всего html, невозможно менять css, не глядя на html. А в ваших примерах один только css.
Разумеется, работать с bootstrap grid system, flex гораздо проще, чем писать всё с нуля. Но вы же, наверное, не свой вордпрес сервер устанавливаете, а пользуетесь их домейном и готовыми страницами? Я не работаю с вордпрес, но мне кажется, если вы берете стандартный вордпресовский темплейт, там всё это должно уже быть. Это как бы последние must have.

html внизу.
Там вроде ничего не надо добаблять кроме:
<meta name="viewport" content="width=device-width, initial-scale=1">
Как я понимаю весь упор на css.
Здесь не связано с wordpress и надо просто сделать мобильную версию изменив css и html.

Я думаю надо оставить css. как был и добавить код для мобильника и остальных внизу.
Правильно мыслю?


//html

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Wild Life</title>
<link rel="stylesheet" type="text/css" href="stylemy.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<div id="header">
<h1>Welcome to Wildlife for Life</h1>
<h2>We fight for life</h2>

<ul class="navigation">
<li><a href="index.html" title="home">Home</a></li>
<li><a href="#" title="contact">Contact Us</a></li>
</ul>
</div>

<div class="content">

<div class="col-right">

<h1>The Wild Life is great</h1><br />
<p>Wild Life includes all non-domesticated plants, animals and other organisms.</p>
<p>Wildlife can be found in all ecosystems. Deserts, forests, rain forests, plains, grasslands, and other areas including the most developed urban sites, all have distinct forms of wildlife.</p><br />

<h3>Destruction</h3><br />
<img src="images/img1.jpg" class="float-left" alt="alternative text. This text is for screen readers or in the instance an image can't load, a description of what should have been here." /><p>Exploitation of wild populations has been a characteristic of modern man since our exodus from Africa 130,000 – 70,000 years ago. The rate of extinctions of entire species of plants and animals across the planet has been so high in the last few hundred years it is widely believed that we are in the sixth great extinction event on this planet</p><br />

<h3 class="clear">Food, pets, and traditional medicines</h3><br />
<p>Anthropologists believe that the Stone Age people and hunter-gatherers relied on wildlife, both plants and animals, for their food. In fact, some species may have been hunted to extinction by early human hunters.</p>
</div>

<div class="sidebar-left">
<h3>Favorite links</h3>
<ul class="list">
<li><a href="http://wildlife-museum.org/" title="Lindsay Wildlife Museum">Lindsay Wildlife Museum</a></li>
<li><a href="http://www.worldwildlife.org/home-full.html" title="WWF">WWF</a></li>
</ul>

<h3>News</h3>
<p>Aug/2012 - About forty Blue whales have been sighted swimming in waters 15 miles west of La Jolla.</p>
<p>Aug/2012 - Three tigers have been found dead in India in the last week. The carcass of a ten year old tigress was found in Kanha Tiger Reserve, and another female tiger was found in a very poor state of health in the same reserve. Unfortunately vets could not save her.</p>
</div>
<br class="clear" /> <!-- this code is clearing the floats from the above divs. See what happens when you take it away to really learn what clear does... -->
</div>
<div id="footer">
<p>We believe that we can all live together in Planet Earth</p>
</div>
</body>
</html>

[solution]

Там в Wordpress я использую галлереи.

галлереи это я так понимаю какие-то префабрикейтед CSS?
может есть возможность поговорить с теми кто создал эти галлереи?

так вот в Safari первые 2-3 секунд картинки становятся непропорциональными(большими) - в мобильной версии -нормально.

первые три секунды картинки непропорциональны а потом все выстраевается?
может просто CSS файл попробовать загружать как можно раньше?

Говорила.
Они видят проблему но говорят что надо нанять профессионального программиста чтоб решить это кардинально потому что в основном это не влияет на качество.
Вот поэтому то и надо знать css чтоб изменить что то или как то загрузить раньше.
Для загрузки ведь надо также java script?
Сейчас мне надо изменить css для мобильника.