Stumped - can't seem to increase the width of an image or text container

Hi Everyone-
I’m hoping someone can help solve an issue I’ve been having with a new layout to a site I’ve been running since 2004 (www.cygnus-x1.net).

The issue is on this test page: http://www.cygnus-x1.net/links/rush/new-layout-2017/hold/

The entire page functions perfectly when scaling the size of the browser window. The width of images, and the main ‘Welcome’ text box all increase and decrease as expected. However both the main C-X1 logo at the top of the page, as well as the ‘Welcome’ text box will not increase beyond 992 pixels wide, even if the browser is large enough to contain a great er width while maintaining all of the border padding.

This template, and corresponding CSS code, was created for me, and I’m afraid I’m not terribly well versed in CSS. However I have gone through the style.CSS file, as well as other CSS files, identified where the calls are for both the logo image and text box, and I see no obvious code that restricts the width of these components to 992 pixels (or approximately that width).

I’d really appreciate it if someone could take a look and point out the error of my ways

The Style CSS file can be found here: http://www.cygnus-x1.net/links/rush/new-layout-2017/hold/css/style.css

And, of course, the source code for the main page can be found via the original link above.

Thanks in advance for your help.

-John

The problem is the <div class="container"> in the header.
The css gives it fixed widths at various screen sizes, like “adaptive” design, rather than “fluid” design.
I notice it’s Bootstrap, I don’t do Bootstrap, but I imagine it will have another container class which is fluid and will fill the width. Actually just a plain <div> will do that by default, but I’m not sure if that will mess up some other bootstrapery in some way.

[off-topic]
That image is a bit large at 3534 pixels wide, maybe could use some optimising, it was slow to load.

1 Like

Thanks. You pointed me in the right direction. I completely overlooked the bootstrap css file. I did a little trial and error and found the width command that was causing the issue. Thanks again!

John_Patuto,

HOW did you fix the problem?

When using a framework such as Bootstrap, one is expected to staunchly adhere to the rules of the framework and never change the framework’s “master” files. Changes should be in the form of adds and/or overrides in a custom stylesheet (which is placed last the the CSS cascade).

The Bootstrap fluid classname is “container-fluid”.

If you have not memorized the Bootstrap instruction manual, I advise reading it thoroughly. One can write a blunderful(sic) web page by trying impose “custom” CSS where Bootstrap conventions should be employed.

I’m not a Bootstrap person, either. But I am keenly aware that there are many ways of using the Bootstrap framework incorrectly. It’s an “overlord” not a plug-in.

3 Likes

Within the Bootstrap CSS file, there is some coding that adjusts the width of the image and text container depending on the width of the browser window. Here’s the code in its original format:

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 980px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 995px;
  }
}

As you can see, the last set of criteria looks for a browser window of 1200 pixels (or more) and sets the image/container to a maximum of 995 pixels. I added another set of criteria of 1600 pixels for the browser and 1250 pixels for the container/image, which solved the issue. I’ve been stress testing it after reading your email…so far, no issues. Yet …

Let me know what you think.

I would agree with @ronpat that you should not mess with the Bootstrap css, but work with it as it is intended to be used. I think the correct fix may be to alter the class in the div to “container-fluid”.

If however you don’t want to work by Bootstrap’s rules, then don’t use Bootstrap at all.

Thanks for the reply and comment. The container-fluid approach does seem to work, but is there a way of restricting the maximum width? When I simply apply the -fluid option, the entire area’s width increases to the full width of the window – which really isn’t what I’m looking to do. Appreciate everyone’s help on this.

The way I do that is simple, just assign a max-width property to the element. Though I am not sure what is the correct Bootstrap method for this.
Possibly assign an additional class to the element and target it in your custom css. Though someone who knows Bootstrap may know better.

<div class="container-fluid toplogo">

.toplogo { max-width: 1000px; }

Brilliant – that worked perfectly. Thank you SO MUCH for help!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.