/    Sign up×
Community /Pin to ProfileBookmark

Adaptive website design

Copy linkTweet thisAlerts:
Jun 18.2018

Kind time of days advise how to make adaptive design of a site? so that nothing slips and the scale is adequate, and also how to make a similar display of the site in different browsers?
Thank you.

to post a comment

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@willy21Jun 18.2018 — the responsive design is al what you mean http://www.enchantingelves.org/
Copy linkTweet thisAlerts:
@SempervivumJun 18.2018 — This is a subject fairly complex and cannot be dealt with a few sentences. Anyway, these are a few hints:

Avoid absolute positioning.

Avoid absolute measurements and use relative ones instead (percentage values).

Make youself familiar with flex layout:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This was made for creating adaptive or responsive layouts.

Often the structure of the layout has to be modified depending on the size of the browser window. This can be done by use of mediaqueries.
Copy linkTweet thisAlerts:
@kimberlywoodsJun 19.2018 — better try video tutorials and overviews for starters
Copy linkTweet thisAlerts:
@SempervivumJun 19.2018 — Regarding video tutorials: Unfortunately many of them are outdated and teach float layout or even absolute positioning.
Copy linkTweet thisAlerts:
@sterncoJun 27.2018 — For certain CSS functionality, you need to include prefixes for different browsers. (Please note this applies selectively so make sure to research which exact code you are using)

Quoting W3Schools here:

Supported by Edge/Internet Explorer with prefix -ms-

Supported by Firefox with prefix -moz-

Supported by Google Chrome with prefix -webkit-

Supported by Safari with prefix -webkit-

Supported by Opera with prefix -webkit-
×

Success!

Help @22coders spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...