Theme / Mobile View Grumbles

Classic
1

Hi, posting this question here because I’ve tried messaging the theme developer twice and he’s not responded (this seems to be a thing, so it seems from searching related posts).

So, I’m trying to put a site together using a theme I purchased. On desktop or iPad landscape, the site generally looks OK. However, it’s when I look at it in iPad portrait or iPhone that things seem to go awry. A big salmon coloured band appears at the top of the page under the menu navigation - which I’d really like to get rid of! Was hoping there’s some custom CSS that I could put in the master code that would do the trick.

Additionally, the title for a blog post seems to shrink when you actually click on the post title (it’s like it’s not using the same font size as when it’s displayed in the main blog page).

Using RW 7.5.7 and site address is http://www.pinkchicken.net/ - I don’t believe the theme developer has ever done any updates to it since creation.

Many thanks,

M.

2

The site is address is https: not http:. Just letting you and other know.

I don’t have the Florence Theme from Brandon Lee, but it looks like there is an area called ‘banner’ that isn’t being used?

You can try this to get rid of the band if there isn’t an option in master styles:

#banner {
    display: none;
}

As for the font size on the blog heading try this:

h1.blog-entry-title {
    font-size: 32px;
}
1 Like
3

I don’t have the theme, but from the promo website it looks as though it’s the ‘Solgan Area’ and there’s an option to Display or Collapse. Try the latter.

For the blog entry title, if I understand correctly, try this CSS in the custom CSS panel

h1.blog-entry-title {
    font-size: 2em;
    line-height: 2.1em;
    padding: 30px 0 11px;
}

And adjust the font-size to suit.

Rob

1 Like
4

The banner image is only not used on the front page. The other pages (blog, photo gallery, links, etc…) all use banner images - the salmon area still remains. Hiding the banner would also get rid of the image.

I did try this, but the halving of the title text size still remains - when I’ve tried using px and %.

Thanks,

M.

5

Try this for the banner then:

div#bttmHeader {
    display: none;
}
6

Your Instagram icon is linked to the wrong url which then throws a privacy warning. It is linked to instRagram.

Out of interest I have never heard of Galahs being called Pink Chickens before. A local twitcher here refers to them as pink and grey raptors!! Big flocks here in combination with Corellas.

7

I didn’t see that code on the published page. I don’t use % or EM’s for font size. I try and stay with REM’s and/or just PX.

EM’s are relative to the direct parent. That can get a bit messy if the parent size gets changed. REM’s are relative to the root unit that’ll always be based upon the font-size value of the root element, which is the <html> element. Most browsers default to 16px on the html tag unless you change it with CSS. Makes it a lot simpler to keep track of.

You can try to get more specific with the selector:

.blog-archive-entries-wrapper h1.blog-entry-title {
    font-size: 2rem;
}

Or add an !important to the statment:

h1.blog-entry-title {
    font-size: 32px!important;
}
8

Oops! :sweat_smile: Well-spotted! Thanks!

M.

1 Like
9

That’s really useful to know, thanks. (And it did the trick, too!)

M.

10

Bingo! Thanks! :smiley:

M.

11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.