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

Tips for customizing text color in a disabled MUI TextField?

Shifting the "active" designation within a dropdown menu to correspond with the user's current page

While scrolling, the menu is being truncated

Using CSS within the HTML code is effective, however, linking to an external CSS file is not working

Error alert: The system could not locate Google when trying to drop pins

Issues are arising with CSS .not(selector) functionality when applied to a span element

Using HTML and CSS to Position Text Within an Image

What are some effective methods for maintaining the integrity of HTML content?

Cannot close the Bootstrap dropdown after selecting an option

What is the best way to align the logo image in the center of the header vertically?

Unable to get the desired 100px margin at the bottom

Does activating a hyperlink on an anchor element count as a cross-origin request?

Challenges encountered while making CSS adjustments on the Wordpress Twentyfourteen theme

Displaying genuine HTML content in a React application using Algolia Instantsearch

Using Regular expressions in JavaScript to eliminate content between two HTML comment tags

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Switch classes according to scrolling levels

Effortlessly browse through directory with the seamless integration of AngularJS or

Disabling a button until a selection is made in a combobox using Angular

The lack of flexibility in this element stems from the fact that it is not classified as a flex item