I also have the same problem when I use a small screen, like smartphones at:
- "News" Secction and
- Hikashop product screen (see attachments)

Is it possible to change the bars in order to avoid them to split in two? ou maybe to eliminate them in such cases?

Have a link for the site?

Thanks
Paul

Yes:

Alien Bikes Website


Fabio

Hi Fabio,

Can you try adding this

@media (max-width:1040px) and (min-width:780px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:20px; padding-bottom: 20px;}
}

@media (max-width:779px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:16px; padding-bottom: 18px;}
}

@media (max-width:599px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:24px; padding-bottom: 24px;}
}

Hi Paul

I´ve added to my custom.css file but it didin´t work, but I´ve tested the solution suggested by robwent (moderator) at the topic "Blog Layout Bars" and it worked partially:

h2.article-title a {
display:inline-block;
margin-bottom: -8px;
}
h2.article-title {
padding-bottom: 0px
}

After adding this to my custom.css file the blog layout bars became just one single bar at smaller screens (I use the www.responsinator.com/ to see how my website is working in different screens)

The only problem is that is only working for the main secction:
www.alienbikes.com.br/index.php/noticias-menu

How could I use the same code into other parts, like this one below and to my Hikashop products page?
www.alienbikes.com.br/index.php/noticias-menu/17-news-3

I'm afraid I think you have two options

1. Robs solution
or
2. Reduce font size (my solution does seem to work when I test it again in the browser) Its media queries


@media (max-width:1040px) and (min-width:780px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:20px; padding-bottom: 20px;}
}

@media (max-width:779px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:16px; padding-bottom: 12px;}
}

@media (max-width:599px) {
.blog h2.article-title, .blog h1, .blog .componentheading
{font-size:24px; padding-bottom: 17px;}
}

To target other heading tags you will need to add them to the list of styling

#mainWrap h1 a

For instance my css was only targetting elements with .blog class

Cheers
Paul

Problem solved!
I´ve decided to use Robs solution because it was easier to me.

Code added at Custom.css:
h2.article-title a {
display:inline-block;
margin-bottom: -8px;
}
h2.article-title {
padding-bottom: 0px
}

h1.article-title a {
display:inline-block;
margin-bottom: -8px;
}
h1.article-title {
padding-bottom: 0px
}

Modification at template.css, line 6779: (this "solution" I found after spending some time using the Chrome Developer Tools)
border-bottom: 8px solid #bcbc86; (original line)
border-bottom: 0px solid #bcbc86; (new line)

Thank you all!

Right please don't edit existing template code it will be wiped if you compile Less to CSS or if you update the template

Paste in Rob's snippet to the custom css file

Cheers
Paul

If you are unfamiliar with how to do this please check out this thread

www.joomlabamboo.com/index.php?option=com_kunena&view=topic&catid=661&id=110521&Itemid=215

Cheers
Paul