Just to confuse things further: Before deploying any media queries, you should be looking to make the design “fluid”, then only use a query if and when required.
3 Likes
You can’t just “try”, you really need to commit to it. Start from scratch and rebuild.
As you arrange the items on your page, drag the left edge of the browser window from wide to narrow and see how the elements behave, how the text wraps, how the images move, etc. If at a certain width, a layout adjustment is needed, write a media query to make that adjustment only.
Continue composing the page… testing the layout by changing the width of the browser window and writing media queries as needed. In many cases one does not need more than half a dozen media queries, but it does depend on the complexity of the site.
Leave the fancy stuff that uses JavaScript for later, if reasonable to do so.
There are two schools of though about writing media queries. One is to design for “desktop first”, the other is to design for “mobile first”. I prefer to go the desktop first route, but acknowledge that mobile first can result in fewer or simpler media queries in some cases. From a hand-design standpoint, “desktop first” is easier to see.
Let me reinforce Sam’s statement that a fluid page is the foundation of a responsive page.
3 Likes
Ty once again to all of you for the Answers, especially ronpat. You can close this thread. I will write for any help if i have something already done.
Threads usually remain open for several weeks. You can add to this one if you wish. It might be a convenient place to start the rewrite. I would like to follow you as you go along. Not too fast and very thorough. With appropriate thought given to each decision. Take your time and do it well the first time. The second time will me much easier and quicker. 
1 Like
The good news is, and something many overlook when they think/say “RWD is hard to achieve”, is that vanilla html (before applying any css) is almost completely responsive by default.
All block elements scale to fit the browser, all inline elements wrap to new lines and flow.
The only problematic elements are images and tables which may be wider than some given viewport.
The images are easily dealt with like so:-
img {
max-width: 100%;
height: auto;
}
Tables are a little more tricky to deal with.
But my point is, responsiveness is there from the beginning, and it’s only that people are in the habit of adding css rules which break that and make the layout “rigid” by adding fixed sizes ect…
So you can think of it largely as not what must I add to be responsive, but what not to add to lose it.
3 Likes
Hi,
If I may suggest two things; The first would be to remove the “preloader” z-index:99999, that would let visitors view the site without javascript. Like this:
.preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* z-index: 99999; */
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
background: none repeat scroll 0 0 #fff;
}
That would make at least me and @ronpat happy.
Then as the second, This is not a good example of a “one page site”. I would split the very tall one page you now have into separate pages, one for each #name in the menu.
You can do this very easy by copying your whole page “index.html” four times and name the copies:
“about.html”
“zaloga.html”
“gallery.html”
“lokal.html”
Now you have five pages including the original index.html. For each of these, delete all sections that does not belong in that page. Keep the section that has the same name as the page now have and all the code that comes before and after the sections.
Now there are five different pages saved in the same place, the root of the site: “/”. All pages has the same menu and footer etc, only the content in the section you marked as the names in the menu is now in five different pages.
Now rename the menu to address the new pages like this:
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html" class="smoothScroll"><span>Home</span></a></li>
<li><a href="about.html" class="smoothScroll"><span>O Nas</span></a></li>
<li><a href="zaloga.html" class="smoothScroll"><span>Nasz Personel</span></a></li>
<li><a href="gallery.html" class="smoothScroll"><span>Oferta</span></a></li>
<li><a href="lokal.html" class="smoothScroll"><span>Kontakt</span></a></li>
</ul>
You can copy and paste the menu to all pages as it is the same menu on all.
(By the way, the index.html is the default page for the site root, so in the menu it can be addressed as just “/” instead of “index.html”. There is more to say about page adresses, but I’ll pass that here.)
The benefit of having the content in separate pages is:
The visitors can scroll the page to see the footer or back to the menu, they are still on the same page and wont be confused of another menu page scrolling by like in that original tall page.
You actually could get rid of all the javascript, with the first suggestion to remove the z-index on the “preloader”, as a whole the site will work the same it did before. (The javascript smooth scroll had nothing to add anyway.)
Please try this if you like and post again.
EDIT)
My suggestion does not conflict with all other advices you’ve got about responsivness etc. It would in fact make the task simplier IMHO.
4 Likes
Is it possible to remove the site’s name from the first post here. please?
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.