Responsive button in Top Nav home page

[SoleWriter]

Hello guys,

I am trying to include a responsive button on the home page of my top nav output. To do this, I created a div, which I based on one that was in Flare's original home page. I edited the margin left and right settings of the div to make the button display correctly on a laptop screen. However, when I change the screen to a smaller size, the button shrinks, shifts to the right and then eventually disappears. I don't have a great deal of CSS knowledge, so I'm not sure where I am going wrong.
Could anyone shed any light on this?

This is the display on a small screen:

SmallScreen.png

This is the correct display on a laptop sized screen:

LaptopScreen.png

This is the code from the stylesheet:
div.buttonGroup
{
font-family: 'Source Sans Pro';
color: #ffffff;
font-size: 100%;
border: solid 2px #000000;
display: block;
}

Thanks for any tips that you can offer!
Emma

[kwag_myers]

Try adding width: 100%; to the CSS, or some padding (0.5em).

[SoleWriter]

Thanks a lot for the tips. Unfortunately, that didn't fix the issue that I am seeing.

With just 100% width added, the button ran off the page to the right in the laptop view. The tablet and mobile views had the same issues as before. With both 100% width and padding 0.5em added, the button was wider on the laptop screen but still ran off the page, and the same issue again on tablet and mobile. With just padding 0.5em added and no width 100% setting, the button looked OK on the laptop screen again, but bigger than without the padding setting. The mobile and tablet output was still the same.

Let me know if you think of anything else to try. Thanks again!

[NorthEast]

The CSS you posted for the div wouldn't do anything to the position - neither position it in the centre, nor to the right.
So the position is being set by whatever you have put that div inside.

Anyway, if you need to position a box in the middle of the screen, a very simple solution would be something like this:

Code: Select all

div.centerBox {
    background-color: lightblue;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 30%;
}

[SoleWriter]

Thanks so much Dave, that CSS has done the trick! I knew I was missing something in the CSS, but didn't really know where to start.
If you know of any good books on CSS, let me know. Thanks again.

[NorthEast]

Thanks so much Dave, that CSS has done the trick! :) I knew I was missing something in the CSS, but didn't really know where to start.
If you know of any good books on CSS, let me know. Thanks again.

Rather than a book, I'd suggest W3Schools: http://www.w3schools.com/
It has lots of "try it yourself" examples, so you can mess about with things.

If you want to diagnose problems, press F12 in your browser.
All browser tools have an 'inspect' option, which you can use to select something on the page and see the HTML and CSS behind it.