CODEWITHSUNDEEP
phphtmlcsswordpress
Ross Symonds
Ross Symonds

Reputation: 79

Layout Issues When I Expand The Width Of My Browser

My website is www.rosstheexplorer.com

When the device width is greater than 601px I want the following to happen

  1. I don't want there to ever be any space between the menu and the custom header
  2. I don't want there to ever be any space above the customer header. I have now resolved this problem, look here for the solution Reducing White Space Above Your Header Image Regardless Of The Browser Size.
  3. I don't want H1, the plugins or any other content on the page to ever overlap the customer header. I have now resolved this by using code I discuss in the 'Reducing White Space Above Your Header Image Regardless Of the Browser Size' link.
  4. I don't want there to ever be any white space to the left or right of the customer header. I have now resolved this problem, look here for the solution Increasing The Width Of Your Header.
  5. I want to always be able to see the whole text 'Ross The Explorer', I don't want the last R to ever be removed. I have now resolved this problem using code discuss in the 'Increasing The Width Of Your Header' link.
  6. The Navigation Menu bar is always the full length of the page.

Look at www.nomadicmatt.com for an idea on what I want to achieve.

Upvotes: 0

Views: 81

Answers (2)

CalvT
CalvT

Reputation: 3213

I don't think you are loading the required Bootstrap CSS and JS properly.

Loading http://www.rosstheexplorer.com/wp-content/themes/penscratch/css/bootstrap-3.3.7.css results in a 404 error (not found), and http://www.rosstheexplorer.com/wp-content/themes/penscratch/js/bootstrap.min.js does as well.

So find your enqueue functions that look like this:

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css' );
wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js' );

And change them to:

wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap_js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );

Upvotes: 1

Niss
Niss

Reputation: 116

You refer to the bootstrap-3.3.7.css in your head but this file doesn't exist on your server/at this address. You could use a CDN to load boostrap css and js so you won't have to bother having those files on your server, just add these two tags within the head tag:

CSS: 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

JS:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Upvotes: 0

Related Questions