Mastering Bootstrap: Achieving flawless column stacking in succession

Question

Mastering Bootstrap: Achieving flawless column stacking in succession

I am currently integrating bootstrap into my existing HTML code, but I only require it in two specific sections to avoid rewriting the entire code.

Everything looks fine on my 1080p screen as intended.

However, when I resize the screen slightly

The title appears like this:

Liga
Juizforana

instead of:

Liga Juizforana

(I forgot the technical term for this issue, apologies for my lack of knowledge)

and the trophy image seems a bit misplaced

as I further reduce the screen size

the trophy does not move under the black transparent box containing the description

On a mobile screen:

the trophy overlaps with other elements instead of going below the black box and pushing the background down to fit in its place, resulting in it appearing above everything (the red box).

Here is the HTML code snippet:

<div class='conteudo col-md-offset-1'>

        <div class='inicio'>
        <a id='inicio'></a>
            <div class='topo'>
                <div class='subir col-lg-6 col-lg-offset-1'>
                <div>
                <p class='titulo'>Liga Juizforana</p>

                <hr size='1' align='left'>

                <p class='subtit'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a cidade focando em League of Legends. A intenção do campeonato é a diversão de todos, tendo campeonatos sempre que possível para todos se interagirem, conhecerem e entrarem no cenário competitivo da cidade.</p>
                </div>
                </div>


                <div class='grandelogo col-lg-5 col-lg-offset-7'>
                    <img src='imagens/LigaJFLogo.png' border='0px' alt='LigaJFLogo' title='LigaJFLogo'>
                </div>
            </div>

            <div class='textos'>
                <p id='intro'>A Liga Juizforana tem o intuito de trazer campeonatos diversos para a área da cidade começando por League of Legends. A intenção do campeonato é o foco na diversão de todos, tendo campeonatos sempre que possível para todos entrarem no cenário competitivo da cidade.<br><br>

                Dessa vez é a terceira edição :D. Inicialmente o campeonato vai ser focado em ter 16 times no total, e conseguimos recompensa da própria Riot! Inicialmente o campeonato será online mas caso cresçamos o campeonato pode ter etapas offline, e caso você queira ajudar com isso, pode mandar uma mensagem pelo próprio sistema de contato pelo site.</p>

                <div class='logoLol'>
                    <img src='imagens/lolLogo.png' border='0px' alt='lolLogo' title='lolLogo'>
                </div>
.
.
.

I have attempted to organize all these classes to better understand their purpose and prevent any potential conflicts or bugs caused by using similarly named elements.

Regarding the CSS styling:

.conteudo {
    }

.conteudo .topo {
    height: 952px;
    background-image: url("http://na.leagueoflegends.com/sites/default/files/upload/art/wp_alistar_vs_olaf_1920x1080.jpg");
    background-color: #ffffff;
}

.topo .titulo {
    max-width: 85%;
    font-size: 74px;
    color: white;
    text-shadow: 5px 5px 1px rgba(0, 0, 0, 1);
}

.topo hr {
}

.subir{
    padding-top: 250px;

}

.topo .subtit {
    margin-left: 80px;
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 1px rgba(1, 0, 0, 1);
}


.subir div {    
    background-color: rgba(0, 0, 0, 0.6);
    padding-left: 50px;
    padding-top: 50px;
    padding-right: 50px;
    padding-bottom: 50px;
}


.grandelogo {
    margin-top: -34%;
}

I am struggling with making the design responsive and would greatly appreciate any assistance or tips. I know this is quite a complex issue, but if you could provide some guidance or suggestions that would be extremely helpful. I have provided multiple screen examples to help illustrate the problem clearly.

html css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

To optimize your HTML structure, consider incorporating some default bootstrap classes.

Essentially, you should organize your code using a mix of rows and columns.

In your scenario, there are two sizable content blocks (the transparent black block and the trophy image).

These blocks should be enclosed within a single row but placed in separate columns. Here's an example:

<div class="row">
    <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
    <div class="col-xs-12 col-md-6">Trophy Block</div>
</div>

Any additional content associated with these blocks should be placed in separate <div class="row"> elements.

You could even adjust your entire markup so the whole page is encompassed in one row, with the left side navigation in one column and the main content in another column.

<div class="row">
    <div class="col-xs-12 col-md-2">
        Left-Side Nav
    </div>
    <div class="col-xs-12 col-md-10">
        <div class="row large-background">
            <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
            <div class="col-xs-12 col-md-6">Trophy Block</div>
        </div>
    </div>
</div>

Apply the desired background to the inner row (or the parent column class) and ensure it appears correctly on mobile devices. It's often easier to start with mobile markup and then adjust for desktop views.

Refer to the Bootstrap documentation on grids (http://getbootstrap.com/css/#grid) for more examples and detailed information.

Answer 2

To optimize your HTML structure, consider incorporating some default bootstrap classes.

Essentially, you should organize your code using a mix of rows and columns.

In your scenario, there are two sizable content blocks (the transparent black block and the trophy image).

These blocks should be enclosed within a single row but placed in separate columns. Here's an example:

<div class="row">
    <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
    <div class="col-xs-12 col-md-6">Trophy Block</div>
</div>

Any additional content associated with these blocks should be placed in separate <div class="row"> elements.

You could even adjust your entire markup so the whole page is encompassed in one row, with the left side navigation in one column and the main content in another column.

<div class="row">
    <div class="col-xs-12 col-md-2">
        Left-Side Nav
    </div>
    <div class="col-xs-12 col-md-10">
        <div class="row large-background">
            <div class="col-xs-12 col-md-6">Liga Juizforana Block</div>
            <div class="col-xs-12 col-md-6">Trophy Block</div>
        </div>
    </div>
</div>

Apply the desired background to the inner row (or the parent column class) and ensure it appears correctly on mobile devices. It's often easier to start with mobile markup and then adjust for desktop views.

Refer to the Bootstrap documentation on grids (http://getbootstrap.com/css/#grid) for more examples and detailed information.

Answer 3

Answer №2

To ensure a responsive design using Bootstrap, the key is to prioritize mobile first. For example, if you want a column to occupy the full width on small screens, half width on medium screens, and 1/4 width on large screens, you must specify it as follows:

<div class="col-xs-12 col-md-6 col-lg-3">

If you encounter issues with text wrapping, consider using media queries to adjust the font size based on screen size:

@media (min-width: 320px) {
  .title {
    font-size: 1em;
  }

}

@media (min-width: 700px) {
  .title {
    font-size: 3em;
  }
}

Answer 4

To ensure a responsive design using Bootstrap, the key is to prioritize mobile first. For example, if you want a column to occupy the full width on small screens, half width on medium screens, and 1/4 width on large screens, you must specify it as follows:

<div class="col-xs-12 col-md-6 col-lg-3">

If you encounter issues with text wrapping, consider using media queries to adjust the font size based on screen size:

@media (min-width: 320px) {
  .title {
    font-size: 1em;
  }

}

@media (min-width: 700px) {
  .title {
    font-size: 3em;
  }
}

Mastering Bootstrap: Achieving flawless column stacking in succession

Answer №1

Answer №2

Similar questions

What is the best way to remove column and row gaps in a Bootstrap grid system?

Django redirects to an alternative template instead of the default one

Using JavaScript to listen for events on all dynamically created li elements

Identifying browser compatibility for date input type with Angular 2 and above

Aligning a sprite at the center of a div background

Talwind Flexbox Grid Design

Clicking on the button will result in the addition of new

Adjust the color of both the image and text when hovering over either one

Array of radio buttons submitted via form

Should Chrome be allowed to have TABLE tags within P tags?

Is it possible to save the location of a draggable box using CSS3?

What causes a div to shift to the right when the margin-left is set to auto?

The scroll bar disappears behind the div

The art of styling <li> elements compared to <a> elements

Accessing a distinct element of e.parameter

Looking to showcase an uploaded image next to the upload button in Vue.js using Element.ui?

The necessary min-width for the media query has not been implemented

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

Gone Without a Trace: Where Did the WP Admin

Troubleshooting Issue: Ionic 3 and Angular ngForm not transmitting data