CSS does not load correctly when I upload it to my hosting

Question

CSS does not load correctly when I upload it to my hosting

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

0

I have a problem that is killing me. Working with Brackets I can see my page correctly done on my local server, but when I upload it to my hosting server it is not displayed correctly.

The problem arises in the div with class ".text-fixed"

This is how it looks on my local server:

This is how it looks on my hosting server:

In fact, in my local file it looks good in responsive mode, but on the server it's all wrong.

You can find the error in www.centrodentalcofico.com.ar

Thanks for the help.

<!DOCTYPE html>

<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-CDC.png">

<title>Centro Dental Cofico</title>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Mogra" rel="stylesheet">

<!-- CSS -->
<link href="assets/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<link href="assets/node_modules/bootstrap-touch-slider/bootstrap-touch-slider.css" rel="stylesheet">
<link href="css/animate.min.css" rel="stylesheet">
<link href="css/demo.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/core.css" rel="stylesheet">
<link href="../css/responsive.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet">    

<div class="container">
    <section id="header">
       <div class="texto-fijo wow fadeInUp anidur-1s">
           <div class="texto-interno">
               <h2>DESDE 1996</h2>
               <h1>ESTÉTICA SALUD ARMONÍA</h1>
           </div>
       </div>
        <div class="slider-principal">
            <div>
                <img src="images/header/1-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/2-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/3-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/4-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/5-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/6-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/7-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/8-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/9-final.jpg" alt="">
            </div>
            <div>
                <img src="images/header/10-final.jpg" alt="">
            </div>
        </div>
    </section>
</div>

The CSS of that section is:

.texto-fijo{
   text-align: center;
   position: absolute;
   z-index: 50;
   bottom: 10px;
   left: 0;
   right: 0;
}
.texto-fijo .texto-interno{
   width: 500px;
   height: 60px;
   position: relative;
   margin: 0 auto;
   background-color: rgba( 71, 71, 71, 0.456 );
   border-radius: 12px
}
.texto-fijo h2{
   font-size: 18px;
   color: #FFF
}
.texto-fijo h1{
   font-size: 25px;
   margin-top: -20px;
   color: #FFF
}

html css clase

asked by Pablo Colqui 02.02.2018 в 17:40

source

3 answers

search strings list Why does the if statement not work with the getElementById?

score 1 · Answer 1

1

The solution was provided by Cig, the problem was the order in which I entered the CSS, but I put my CSS as the first option and then Bootstrap. Thanks!

answered by 03.02.2018 в 13:14

score 0 · Answer 2

I do not know why it happens to you in one place if and in another, I do not suppose you will use different browsers and different configurations and "resolutions" and that the problem is a margin-top that there is when a certain rule is applied. In my case, I see it wrong, it is solved by putting a margin-top to 0:

.texto-fijo h1 {
    margin-top: 0px
}

And with this I see it well, that is, in the file css / responsive.css ( link ) in line 66, there is a rule that applies this to the class .text-fiho in element h1:

.texto-fijo h1 {
    font-size: 25px;
    margin-top: 0px;
}

I suppose that in your house you will have a different resolution and for that reason you do not see it badly, but in the work they will have one that is applied by the rule in said file and they will see therefore, badly.

score 0 · Answer 3

The reason why it happens to you is most likely the fault of boostrap, since it is directly affecting the margin of h1 and h2 , and neither you have styles that affect these two directly and overwrite the default styles of the framework.

You can correct the margins of each , by placing a class for each element and then correct it in your css. Changing the default margin in each one.

Now, you can also fix it, assigning the parent a specific and common line spacing for these two children , just add something like this on your stylesheet:

.texto-fijo .texto-interno h1,
.texto-fijo .texto-interno h2 {
    line-height: 1.6em;
}

By the way, a recommendation: Do not put as many css files separately, being as I see, several can combine them into one, for example: style.css, demo.css, core.css o responsive.css could perfectly be one. The best thing is to alleviate the overload of files to the server a bit.

Let us know how it went. Successes!