• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers

Header Image obscured

Participant ,
Nov 22, 2018 Nov 22, 2018

Copy link to clipboard

Copied

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

Views

982

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Nov 23, 2018 Nov 23, 2018

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:

...

Likes

Translate

Translate
LEGEND ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Nov 23, 2018 Nov 23, 2018

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Nov 25, 2018 Nov 25, 2018

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines