Header Image obscured

[mindmastery]

Hi Guys,
Somewhere along the line I have made an amendment to the new design a guy created for me, which has caused the header image to become just a thin grey line at the top of the page, displaying the very bottom of the header image (just under the nav, at the top) as opposed to the full image taking up the top quarter of the webpage, as it used to.  https://www.mindtraining.net/website4/sports-mental-training/gymnastics-tumbling-fear.php  I am using Dreamweaver CC.   It's obviously some kind of a Style or Bootstrap issue, as the source code of the actual page does not seem to have changed.   Any thoughts would be much appreciated.     

Cheers,

Craig T

[osgood_]

It looks like you are trying to do something like below? but have somehow mal-formated the code. That's easily done if you use Bootstrap as its hugely verbose  - usually far too many <divs> to cretae the simplest of components.

<section id="main-slider" class="no-margin inner-slider">

<div class="carousel slide" >

<div class="carousel-inner" >

<div class="item active">

<div class="container">

<div class="row">

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

<div class="carousel-content in-logo">

<img src="https://www.mindtraining.net/images/MindTraining-Logo.png" alt="" class="img-responsive in-logo" />

</div>

<!-- end carousel-content -->

</div>

<!-- end col-sm-6 -->

<div class="col-sm-6 animation animated-item-4 no-margin">

<h3 class="animation animated-item-1 ">Mental Training for<br/>

Powerful Sports Performance

</h3>

</div>

<!-- end col-sm-6 -->

</div>

<!-- end row -->

</div>

<!-- end container -->

</div>

<!-- end active -->

</div>

<!-- end carousel-inner -->

</div>

<!-- end carousel -->

</div>

<!-- end carousel-->

</section>

<!-- end main-slider-->

The 'active' container is using a background image which I have moved out of inline css styling and into a css selector (see below). Although you have some content within the carousel component which keeps the active <div> from collapsing  you might want to give it a height or some padding:

.active {

height: 300px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

[mindmastery]

Thanks for your kind interest, as always, osgood - I applied the first part of your coding to the page, but it somehow is still not working for some reason - https://www.mindtraining.net/website4/sports-mental-training/gymnastics-tumbling-fear1.php     

I tried to apply the bootstrap suggestion but it tells me 'bootstrap.min.css is a remote file and cannot be edited'.

Im sure we are much closer, but not quite there yet.  Thanks again for your thoughts, and Im sure you have a viewpoint of this which is probably way above my level of understanding ; )

Cheers,

Craig T

[osgood_ · Accepted solution]

Well you should NOT edit the default bootstrap.css file anyway - so good thing its remote.

If you want to change the Bootstrap styling you should include the css in a 'custom' css style sheet:

Could you create a style sheet named bootstrap_custom.css and link it to your page? like below:

<link href="https://www.mindtraining.net/website4/css/bootstrap_custom.css" rel="stylesheet" />

OR you could include the css below in your 'styles.css' file:

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

Failing that you could just insert the <style></style> block of css AFTER the links to your css files.

<style>

.active {

height: 300px;

margin-top: 50px;

background-image: url(https://www.mindtraining.net/images/Sports-inner-page---banner.jpg);

background-repeat: no-repeat;

background-position: center right;

}

</style>

If you do that you will see the background image again and the logo and text. Not sure if the logo and text is positioned correctly but have a look - they are side by side and maybe need to be under each other.

[mindmastery]

You're a champion osgood - I will try this and see how I go (ie. if my knowledge is up to it, that is) and be in touch.  You (not to forget Nancy) have always been amazing gurus that make this forum so amazingly helpful, and I am extremely appreciative of your vast knowledge.

Cheers,

Craig

[mindmastery]

Ps. I tried to insert the style.css code but it also said it was remote and could not be accessed : (

[osgood_]

mindmastery  wrote

Ps. I tried to insert the style.css code but it also said it was remote and could not be accessed : (

You must have access to the style.css file? Its on your server and should be in the local folder you used to develop the site in the 'css' folder?

<link href="https://www.mindtraining.net/website4/css/style.css" rel="stylesheet" />

Can you change it at local level then upload it to the server?

[mindmastery]

Brilliant as always, osgood.   Thanks so much!    : )
Craig