I have Homepage Design with Sections, which are not same width, how to dial with bootstrap?

Question

I'm amateur web designer with good knowledges of HTML CSS, but i'm beginner with resposive design and bootstrap.

So i need your help to solve my problems. My homepage design has, different sections width, for example Header is 1480px, Services section is 1240px, Call-To-Action Section is 1400px.

My second problem, homepage with resolution of 1480 px isn't showing correctly for example on 15" wide laptop monitors with resolution 1368px width and 19" Monitors with resolution of 1440px width, i need to scroll horizontally to see all content of the page.

In bootstrap media queries for large desctops are on 1200px, my resolution is bigger than this one, i was try to customize bootstrap for 1480 px (1450 + gutter size). But in that way, it jumps from 1480px to 992px.

I hope you'll help me.

Thank you for your time. Best wishes.

1480px header can't be fitted into 1368px wide screen. You can do one of the following: 1. Ask the designer to update designs 2. Scale down whole design into 1200px wide document and calculate the updated widths. Tt would be 81% (1200/1480) of the original. 3. Display a message somewhere that the site is best viewed in 1480px wide screens. — Pankaj Phartiyal, Dec 01 '16 at 18:05

score 0 · Answer 1 · answered Dec 01 '16 at 20:01

0

Step 1: You need to put each of the sections - Header, Services, Call to action - into separate .container and give them additional CSS classes like this:

<div class="container header">
    ...
</div>
<div class="container services">
    ...
</div>
<div class="container call-to-action">
    ...
</div>

Step 2: In your custom CSS file define the desired widths for the maximum screen resolutions but I recommend to use max-width instead of fixed widths:

.@media (min-width: 1200px) {
    .header, .services, .call-to-action {
        width: auto;
    }
    .header {
        max-width: 1480px;
    }
    .services {
        max-width: 1240px;
    }
    .call-to-action {
        max-width: 1440px;
    }
}

answered Dec 01 '16 at 20:01

Johann Kratzik

764
5
11

Thank you very much, that make sense, i will try your solution, you can check homepage design here: http://www.pixinno.com/homepage.jpg – Ljubisa Trajkov Dec 01 '16 at 20:11
Nice design :-) Welcome and I am glad if I could help – Johann Kratzik Dec 01 '16 at 20:59
Did it work? If so then maybe you consider to "accept" my answer so other users with similar questions can find the solution. – Johann Kratzik Dec 03 '16 at 11:01

score 0 · Accepted Answer · edited May 23 '17 at 12:16

The designer may have created high resolution designs so that you can have high resolution images. I think you should improvise a little and make following adjustments to make it fit inside 1200px wide screens and still maintain the aesthetics.

White header can be fitter inside 1368px easily. Use CSS flexbox which adjusts content automatically and keep everything centered (use justify-content: center).
Keep services section at 100% and then instead of using an img tag use CSS background image with position set to cover. It will auto fit the image in required dimensions. You just have to set a height here.
About us section can be divided into two parts, left (approx 25%) and right (approx 75%). Same goes with Contact section in the end.
Clients section can again be squeezed down. Or it can be converted to a horizontal slider.
Services section again can be squeezed down.
Testimonials section can also be reduces in width. Say 80%.
Maps should be 100%. It will auto fit I think. Just set the height.
Prefooter columns can be approx 16% 16% 34% 34% respectively.
Footer is straight forward. Left column can be 75% and right can be 25%.

You can share your progress via a codepen :) I can suggest you edits there.

I have Homepage Design with Sections, which are not same width, how to dial with bootstrap?

2 Answers2