Adjusting the sections

Let's now tweak the settings:

Open the layout.js file from the js folder, as shown in the following screenshot:
You should see the following code:
Below the comment (denoted by //), adjust the section. On line 5, add the following code to let the sections fit into the viewport:
```
$('.full-h').css({
    height: win.height()
});
```
Refresh the site in your browser, and you should now see that the sections fit into the document window, as shown in the following screenshot:

Even though the site loads perfectly well and the sections fit well into the viewport, just as the site loads you see the sections on the page for a brief moment, as shown in the following screenshot:

So what happened here? It's quite simple. The jQuery CDN and layout.js files are placed just before the closing </body> tag. While the DOM is being rendered, the JavaScript is still downloading and executes a brief moment after the DOM has been parsed. This is a very small example of a project...

Tech Concepts

Programming languages

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Responsive Design High Performance

By : Dewald Els

Responsive Design High Performance

By: Dewald Els

Overview of this book

Adjusting the sections

Responsive Design High Performance

By : Dewald Els

Responsive Design High Performance

By: Dewald Els

Overview of this book

Adjusting the sections

Confirmation

Buy this book with your credits?

Submit Your Feedback

Create a Free Account To Continue Reading

Sign in to activate your 7-day free access