Solved

need help finishing up my first bootstrap page

Posted on 2014-11-29
9
199 Views
Last Modified: 2014-12-03
I'm trying to put the finishing touches on my first Bootstrap page, and am running into a few issues I'm having problems with. The page can be found here, and my issues listed below. Thanks in advance for any help!

1) my logo. I want to push the logo over to the left some, about 35px off of the edge of the screen. No matter what I do, it won't budge.

2) When I view the page on my monitor, there is no horizontal scroll bar, but when I view the page on my laptop, I get one. I thought because I was using the grid system, this wouldn't occur. was I wrong to assume this?

3) I'm trying to push the text in my footer over to the left, but again, I can't seem to do so, no matter what I try

4) I notice in Chrome, it keeps loading and loading, even when the page is complete. I didn't see anything in the developer console, is there another tool I can use to track this down?
0
Comment
Question by:Big Monty
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 40472195
First off I do believe

                  
<img src="img/logo.png" class="pull-left brand">  

Open in new window


Can be removed that may solve some issues with placement of the logo.
Seriously.
That logo is controled by the .css file.....
Thats why u can not move it.


Another suggestion is downsize that logo
as it is.
1,784px × 1,769px  @ 156kb.
Not a real huge issue just optimization.
Rename it with a unique name like your sites name-logo.

----------------
Look deeper into the included .css files they are the property specifiers for most of the site.  

Replace

with "css/bootstrap.min.css"
file so you can read the css file.

bootstrap.min.cssWith this one.

Selvol
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40472556
the css on the logo controls the size, as well as the placement on smaller screens, as explained here (sorry, should have included that originally). it's that size right now until I can get a smaller one from my designer. I want to add some css to push it over to the left on page load

I plan on mini-fying the css file once the design is further along, right now it's easier to dig through the file. that shouldn't be causing the incessant loading of the page though.

any other suggestions out there? :)
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40472595
If you are using Bootstrap then you should stay within it's constraints else you are just creating problems.

1:
xtLogo img {
margin-left:-35px
}


2: You have a class in content-section-a ...
col-lg-12 col-lg-offset-6 col-md-8 col-md-offset-4

lg-12 with an offset of 6 is going to push the content off the screen on larger displays

3.
footer ul {
    margin-left: -30px !important;
}


4. The only thing for the slow loading I see is the 4MB coffee beans image
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 33

Author Comment

by:Big Monty
ID: 40474416
thx Gary, I'll have a go tonight with these and report back here
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40475099
I tried your suggestions for #1 and #3 and it doesn't left align. The only time I can left align something on the page is when i do something like the code below outside of a container, which kind of defeats the whole purpose of using BS:

<div style="float:left;">text</div>

for #2 I got rid of the scrollbar by mimicking the column structure of the row above, that way I could have my signup form off centered a bit:

<div class="row">

    <div class="col-sm-3"></div>

    <div class="col-sm-9">
        <div class="signup text-center">
            <form id="signup-form" name="signup-form" method="post" action="signup.asp">
                <label for="email">EMAIL</label>
                <input name="txtEmail" type="text" class="textFields" id="email">
                <br>
                <label for="zip">ZIP</label>
                <input name="txtZip" type="text" class="textFields" id="zip"><br /><br />
                <input type="submit" name="submit" id="submit" value="Create a Profile" class="blueButton">
            </form>
            <br />
            <p class="fineprint">*We respect your privacy and will not spam or share your email address with third parties.</p>
        </div>
    </div>
</div>

Open in new window


I'm really confused on why I'm unable to left align anything on my page. I changed all of my columns to be col-sm-xxx, as it's my understanding if the smaller column class is specified, it should work on larger devices. is that assumption correct?

When i look at the page in chrome dev tools and highlight the row html, the highlighted section on the page is not 100% wide, it actually looks like there are 33% margins on both the left and right side, any idea why that's the case?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40475159
1 and 3 are doing what you asked for - everything is already left aligned to start with, Bootstrap doesn't change it.

looks like there are 33% margins
Don't know what you mean, in default layout Bootstrap isn't 100% wide, it has defined breakpoints.
If you want it 100% wide then you use container-fluid instead of container
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40475778
on larger displays, it was showing ~33% margins, check out my screen shot.

i thought the breakpoints were 15px for each margin?

looks like container-fluid might do the trick, I'm going to play around with it. I'm wondering why the margins are pushed so far in for larger displays though (for my own curiosity)...
example.png
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40476085
Check my article for the fixed dimensions of BS
The maximum width is 1170px
0
 
LVL 33

Author Closing Comment

by:Big Monty
ID: 40479496
thanks for the help, didn't know there was a max width, which explains the way it looks on my larger display. not going to worry about larger displays for now
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question