Hi

Here's another issue with the responsive layout for Fresh Bistro.

I've attached a screenshot that show the bar sitting over the text - this happens roughly between 750px and 900px wide - just where my client's iPad views. I've tested this with a Mobile/Responsive Web Design Tester in Chrome and found that certain 'devices' see this bar and others don't (according to their screen widths).

I used the Chrome Inspector and found the following :

.s5_responsive_mobile_present #s5_responsive_mobile_bottom_bar_outer, .s5_responsive_mobile_present #s5_responsive_mobile_drop_down_wrap #member-registration div, .s5_responsive_mobile_present #s5_responsive_mobile_drop_down_wrap .s5_regfloatleft {
    width: 100%!important;
}

.s5_responsive_mobile_present #s5_responsive_mobile_bottom_bar_outer, .s5_responsive_mobile_present #s5_responsive_mobile_top_bar {
   [color=red] display: block!important;[/color]
}

The bar disappears id "display" in the second .s5 row of code (marked in red) is removed in the inspector. However, I cannot locate which file I need to change, or which line.

The inspector shows "s5_responsive_bars-min.css"

I hope you can help point me in the right direction and help fix the problem.

Many thanks, David

Hello,

If you add the following to the bottom of your custom.css file this should remove the black bar:

#s5_body #s5_responsive_mobile_bottom_bar, #s5_body #s5_responsive_mobile_top_bar { display:none !important;}

Shape 5

Joomla Templates => Fresh Bistro - Club => : spinfx August 30, 2016, 11:21:16 PM