Responsive layout

BB Theme
1

Hi,

I have added a button in the top bar layout, but it is not looking good on smaller devices (tried portrait mode on ipad air). here’s the code I added to CSS section:-

test website:- http://maxv2.myhostedwebsite.com/

.btn {
   position: absolute;
   top:10px;
   left:0px;
  background: #ff0000;
  -webkit-box-shadow: 0px 1px 3px #666666;
  -moz-box-shadow: 0px 1px 3px #666666;
  box-shadow: 0px 1px 3px #666666;
  font-family: passion one;
  color: #000000;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #000000;
  text-decoration: none;
}

What do i need to add to fix this please?.

2

Hey Derrick,

That’s because you’re using position absolute. You’ll need to assign a different styling for that element when the width goes down through media queries or it won’t scale.

I’d suggest just making the top layout to 2 columns though, that would make it easier. :slight_smile:

Ben

3

ok thanks Ben, but how do I make the top layout into 2 columns as its currently using the top bar style within the BB theme.

4

Ah, ok I found it no worries

5

No worries! Have fun with BB! :slight_smile:

Ben