Problem with my code

Problem with my code
0

#1

Hi. I have a problem with my portfolio. In small devices there is a blank space on the right side. How can I fix it? https://codepen.io/paulinafischer/pen/GNONKJ


#3

first, please validate your code and fix those stray tags :T

.container-fluid{
  margin:0;
  padding:0; // problem
}

if you want your section(s) to touch the sides of container-fluid, nest them inside .row


#4

@paulinafischer—if you open up developer tools and have a look at a div with .container-fluid, you will see that it has the following styles:

    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;

Then have a look at the styles for .row:

    margin-right: -15px;
    margin-left: -15px;

The reason that you are getting the white space is because the negative margins for .row is meant to offset the 15px padding for .container-fluid—since you have simply removed the padding for .container-fluid, the negative margin in .row now make it 30px bigger than it should be, therefore producing the white space that you are having issue with.

I suspect that you decided to zero the padding for .container-fluid because you ran into multiple spacing issues as you have nested .container-fluids—you are not meant to nest either type of Bootstrap containers.

If you clean up your code, remove the nested containers and follow @pseudop’s suggestion then the white space should go away.


#5

@paulinafischer

As a new person to coding, it is tricky that the Bootstrap tool has a few “opinions or bias” built in.
The article below discusses the concept of “Resets” and why they are used, but even those are not complete resets . . .

Give it a read. I found it interesting.

Cheers,
-WWC


#6

Hello, I have applied the instructions but the problem continues. Please help.


#7

Hello, I have applied the instructions but the problem continues and it is bigger. Please help me.


#8

If I were you, I’d delete that id=test2 which you defined as

#test2 {
    margin: 30px;
}

Also, get rid of class=“container-fluid” in your div id=“test1”

I’d also get rid of class=“row” in your

<div id="test2" class="row">

BTW, technically, id=“whatever” should only be assigned to one html element.

If you get rid of your id #test2, and the class=“row”, you’d get no horizontal scroll bars

Here’s the representative screenshot of the top/middle/bottom portion of your site after doing the above changes.

No horizontal scrollbarsand everything goes edge to edge without a big empty margin.


#9

Here is what worked for me Paulina:

body {
  overflow-x:hidden;
}

What this does is hide anything that is overflowing on the page.
I don’t know if it is the “best” fix but I have used it several times in the past for various project and it always does the trick.

You could also do:

* {
  overflow-x:hidden;
}

#10

I should say that it is hiding anything overflowing horizontally on the page.


#11

Did you even try it?

Because this is the result.

And at the bottom, you still have that horizontal scrollbar and everything is not centered, like the github and linkedin icons.


#12

Without rewriting too much of the html code, my quick fix is removing all of the class=“row” usage you have, and then overriding the row margin.

.row{
  margin:0px !important;
}

Here’s the working codepen. No horizontal scroll bars and still responsive.
https://codepen.io/owel/pen/JOogjp


#13

Good point Dayashton! Another trick that i use on top of that would be to find out what is causing the horizontal bar to appear on the bottom. What I do is open the developer tool,( on Macintosh command option + i )
on Windows i think (Control alt + i )and delete the markup elements on the left one by one to see if the bar disappears and once i know which element is causing the issue, i can then do:

element {
overflow-x: hidden;
}

I hope it helps!


#14

Yon can “fix” the problem really easily simply by applying following @owel’s instructions and apply overflow-x: hidden to the outermost .container-fluid—but this is a horrible way to go about “fixing” the problem because you are simply bandaging much bigger problems. There is no point if everyone suggests solutions and you simply go try them without understanding what the problem is—I can hardly imagine that anyone who knows Boostrap well and know CSS well would be impressed by the code as it is.

I highly recommend starting a new pen and transfer your code, section by section, while fixing the problems that everyone has pointed out, so that you have a better understanding of what is causing the problem and learn from it. This goes for both CSS and HTML, don’t just fix the HTML and copy-and-paste all of the CSS.

Things you really should consider doing the following:

  • If you like Bootstrap and want to keep using it in the future, read the first three sections of this part of the Bootstrap documentation and learn it well
  • Do not nest .container-fluids (once you have fixed the nesting issue, anything that’s inside a .row should automatically span the width of the viewport without causing a horizontal scroll bar to appear, as @pseudop has pointed out )
<!-- This is NOT okay -->
<div class="container-fluid>
    <div class="row">
        <div class="container-fluid>
            <!-- More stuff -->
        </div>
    </div>
</div>
<!-- This is okay -->
<div class="container-fluid>
    <div class="row">
        <!-- columns and stuff -->
    </div>
</div>
  • Format your code properly, both the HTML and CSS are currently piles of illegible mess (bonus note—people are less likely to want to help you if your code is illegible). Below are some examples from your code, please note that people have different preferences when it comes to the use of new lines, single line code… etc., and there is no right or wrong as long as it’s formatted legibile and consistent
<!-- DON'T do this -->
<div id="test2" class="row">
<section class="front"><h3><a href= "https://github.com/paulinafischer" target="_blank" id="github" class="btn btn-info btn-lg" role="button"> <i class="fa fa-github animated infinite bounce" aria-hidden="true"></i></a>
     <a href="https://de.linkedin.com/in/paulinafischer" target="_blank"  target="_blank" id="linkedin" class="btn btn-info btn-sm" role="button"><i class="fa fa-linkedin animated infinite jello" aria-hidden="true"></i></a></h3></section></div>
<!-- At least do something like this -->
<div class="row">
    <section class="front">
        <h3>
            <a href="https://github.com/paulinafischer" target="_blank" id="github" class="btn btn-info btn-lg" role="button">
                <i class="fa fa-github animated infinite bounce" aria-hidden="true"></i>
            </a>

            <a href="https://de.linkedin.com/in/paulinafischer" target="_blank" id="linkedin" class="btn btn-info btn-sm" role="button">
                <i class="fa fa-linkedin animated infinite jello" aria-hidden="true"></i>
            </a>
        </h3>
    </section>
</div>
/* DON'T do this */

h1 { text-align:center; margin-top:150px; font-size:80px;}
.text-container{opacity:none;}

.myname{font-family: 'Poiret One', cursive; position:relative;}
.mylastname{font-family: 'Playball', cursive; cursive;
position:relative;}
#myjob{position:relative; margin-top:-20px;
}
/* At least format it like this */

h1 {
	text-align: center;
	margin-top: 150px;
	font-size: 80px;
}
.text-container {
	opacity: none;
}
.myname {
	font-family: 'Poiret One', cursive;
	position: relative;
}
.mylastname {
	font-family: 'Playball', cursive;
	cursive;
	position: relative;
}
#myjob {
	position: relative;
	margin-top: -20px;
}
  • You can’t possibly learn anything effectively and efficienty by trying to fix a huge mess. If you have time, you should try practising by creating simple layouts and see if the results are what you expect
  • Übung macht den Meister

#15

Thank you very much for all your advice and help. All your contribution was very important to me. <3


#16

You are absolutely right, I will develop my code better. Thank you so much for your advice. :slight_smile:


#17

Hi Paulina, On your slider you forgot the “h” on health. Keep coding!


#18

:sweat_smile: OMG! Thank you so much @fmfarinacci!