Tech Support banner

21 - 40 of 43 Posts

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
Since we don't know the HTML, it's going to be very hard to do much. We really need to know the HTML.
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
I suspect you pasted code into a try editor from w3schools, it doesn't work like that as the changes are not stored in any way.

Upload the HTML file to service like onedrive, google drive, dropbox or similar and post a share link.
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #25
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta, title, CSS, favicons, etc. -->
<title>Home | My Personal Website</title>
<meta name="description" content="my keywords">
<meta name="keywords" content="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Fonts -->
<!-- Custom style -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrapper homepage">
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">


</div>

<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50"><h2> <a href="http://mywebsite.tech/english.html">English</a> | <a href="http://mywebsite.tech/portugese.html">portugese</a></h2></p>
<p class="lead text-black-50"><h3>Link 1 | Link 2 | Link 3 | Link 4 </h3></p>
</div>
</div>


<!-- Horizontal Line -->


<div class="col-xs-3"></div>

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="pull-left fnav">
<p class="mb0 mt20"><p class="copyright">© 2020 My Website</p>
</div>

<div class="pull-right fnav">
<p class="mb0 mt20"> <p class="legal">Privacy Policy | User Agreement</p>
</div> <!-- End of Footer -->

</body>
</html>
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #26
html {
height: 100%;
}

body {
background: #fff;
font-family: Century Gothic,
color: #808080;
}

}
@font-face {
font-family: Century Gothic;
src: url(../fonts/Gothic.ttf);
}


.container {
margin: 0 auto;
width: 60%;
text-align: center;
}

h1 {
display: block;
margin-top: 5.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 17px;
font-family: Century Gothic;
color: #FF7575;
}


h2 {
display: block;
margin-top: 0.45em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 50px;
font-family: High Tower Text;
color: #808080;
}

/* unvisited link */
a:link {
color: #808080;
}

/* mouse over link */
a:hover {
color: #FF7575;
text-decoration: none;
}

h3 {
display: block;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-size: 18px;
font-family: Century Gothic;
color: #808080;
}




.footer {
padding: 2em;
}


.footer:after { /* this is the border */
content:"";
display: block;
width: 70em;
max-width:80%;
border-bottom: 1px solid #C0C0C0;
margin: 2em auto 0;
}


p.copyright {
padding-left: 500px;
font-family: Century Gothic;
font-size: 14px;
color: #808080;

}

p.legal {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
padding-right: 500px;

}
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #27
Ok, as you can see, the text in the footer is not working properly when the page is resized.
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
I see you're using the container, but are not using it as a grid. That is a shame as it would really help in the problem.

A container can be used as a grid wherein you can quite easily add a 'table'. A table can have at most 12 columns and in each column you have a row which has smaller columns that accumulate up to 12, more is not supported. This is not the traditional HTML table, it is the following.
<div class="container">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">tets</div>
<div class="col-md-3">test</div>
<div class="col-md-3">test</div>
<div class="col-md-3">test</div>
</div>
</div>
</div>

That may help you. If you plainly copy/paste it, you will see it is responsive, you could use the structure or something similar to solve your problem.

I would recommend that you put the footer into the container and then you could turn the container into a grid.

I would like to note, I do not have much experience with bootstrap 4 and do also not know if using a grid in the footer is a good practice. It is, nonetheless, something to look into.
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #29
I'm learning Bootstrap slowly but I'm making progress every day. It's quite complicated.
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #30
It's difficult to find someone who can explain to to you as a newcomer how it works in simple terms. Most assume that you're an expert. I've seen several videos on YouTube and they all start with huge website projects. Not very helpful to someone new to this science. I'll keep at it.
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
I completely agree with you, Bootstrap has a lot of features and hidden powers.

I learned Bootstrap about 3 years ago when Bootstrap 4 was not available. I learned Bootstrap 3 with grids and panels, Bootstrap 4 replaced panels with cards and replaced some more elements, hence my comment. I did not spot the grid documentation in bootstrap 4, but an excellent video on Bootstrap grids is
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #32
Thanks, I'll watch the video asap. I was actually watching a video tutorial by Neil Rowe. Let me tell you what I've changed now. It did this in the CSS file:

.col-sm-1 {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
text-align: left;

}

.col-sm-2 {
font-family: Century Gothic;
font-size: 14px;
color: #808080;
text-align: right;

}

and the HTML now looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta, title, CSS, favicons, etc. -->
<title>Home | My Personal Website</title>
<meta name="description" content="my keywords">
<meta name="keywords" content="description">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- JQuery -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Fonts -->
<!-- Custom style -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div class="wrapper homepage">
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">


</div>

<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50"><h2> <a href="http://mywebsite.tech/english.html">English</a> | <a href="http://mywebsite.tech/portugese.html">Portugese</a></h2></p>
<p class="lead text-black-50"><h3>Link 1 | Link 2 | Link 3 | Link 4 </h3></p>
</div>
</div>


<!-- Horizontal Line -->


<div class="col-xs-3"></div>

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="row">
<div class="col-sm-1" >Copyright 2020</div>
<div class="col-sm-2" >Privacy Policy | User Agreement</div>
</div>
</div>

</body>
</html>

However, the end result should look like the attached
329441
picture
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
I think this is close to what you're looking for.

You're on the right track with the grid, but put it in the container and wrap a larger column around the row to make it work.
Code:
<body>
    <div class="wrapper homepage">
        <div class="container">
            <img src="images/logo.png" class="img-fluid" alt="Responsive image">
        </div>
        <div class="container text-center">
            <h1>Choose your Language</h1>
            <p class="lead text-black-50">
            <h2> <a href="http://mywebsite.tech/english.html">English</a> | <a
                    href="http://mywebsite.tech/portugese.html">Portugese</a></h2>
            </p>
            <p class="lead text-black-50">
                <h3>Link 1 | Link 2 | Link 3 | Link 4 </h3>
            </p>
            <!-- Horizontal Line -->
            <div class="col-xs-3"></div>


            <div class="col-sm-12">
       
                <!-- Footer -->
                <section class="footer">
                </section>
                <p class="mb0 mt20">
           
                <div class="row">
                    <div class="col-sm-6">Copyright 2020</div>
                    <div class="col-sm-6">Privacy Policy | User Agreement</div>
                </div>
            </div>


        </div>
    </div>  
</body>
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
I changed the col-sm-1 and col-sm-2 because that's too small, if you try it you'll see that the text doesn't fit.
 

·
Registered
Joined
·
1,389 Posts
Discussion Starter #35
Thanks. I added my custom CSS and it looks better now but I think the Copyright and Privacy Policy need to come more to the inside.
329442


HTML

<body>
<div class="wrapper homepage">
<div class="container">
<img src="images/logo.png" class="img-fluid" alt="Responsive image">
</div>
<div class="container text-center">
<h1>Choose your Language</h1>
<p class="lead text-black-50">
<h2> <a href="http://mywebsite.tech/english.html">English</a> | <a
href="http://mywebsite.tech/portugese.html">Portugese</a></h2>
</p>
<p class="lead text-black-50">
<h3>Link 1 | Link 2 | Link 3 | Link 4 </h3>
</p>
<!-- Horizontal Line -->
<div class="col-xs-3"></div>


<div class="col-sm-12">

<!-- Footer -->
<section class="footer">
</section>
<p class="mb0 mt20">

<div class="row">
<div class="col-sm-6 copyright">Copyright 2020</div>
<div class="col-sm-6 legal">Privacy Policy | User Agreement</div>
</div>
</div>


</div>
</div>
</body>


CSS:

.copyright {
font-family: Century Gothic;
font-size: 15px;
color: #808080;
text-align: left;

}

.legal {
font-family: Century Gothic;
font-size: 15px;
color: #808080;
text-align: right;

}
 

·
Windows Specialist, Microsoft Support, BSOD Kernel
Joined
·
614 Posts
What browser are you using? I see something different.
 
21 - 40 of 43 Posts
Top