WordPress.org

Ready to get started?Download WordPress

Forums

Expound: Hide Site Title and Tagline on Tablet (12 posts)

  1. willfan09
    Member
    Posted 6 months ago #

    Using Expound theme and have combed pretty much every thread I could find to hide my site title and tagline on tablet. I have child theme and have hidden title and tag on desktop effectively using the below code (which also includes code for making header image clickable).

    .site-title a {
        background: url('http://url-to-your-logo.png') 0 0 no-repeat;
        width: 800px;
        height: 120px;
        text-indent: -9999px;
    }

    I have an Ipad and Ipad mini and both refuse to hide the site title and tagline. I have tried many versions of the below but none have worked.

    .site-title,
    .site-description{
        visibility: hidden;
    }
    
    .site-title,
    .site-description{
        display: none;
    }

    I would just uncheck the "display header text" box of the site title and tagline but after reading tons of threads it seems this is a terrible idea as far as SEO. Anything I can do to resolve this? My site is http://www.veggiefans.net

  2. DMBarber
    Member
    Posted 6 months ago #

    Your site looks good!

    This is not tested, but have you tried adding the following to your child theme css:

    .site-branding {
    overflow: hidden;
    }
    .site-branding {
    margin-top: 150px;
    }

    This would essentially 'hide' the title and tagline by pushing it outside the div, and therefore hiding it due to overflow...

  3. Tareq
    Member
    Posted 6 months ago #

    Look into:

    @media screen and (max-device-width: 480px){
        /*--- iPhone only CSS here ---*/
    }

    Obviously this is for iPhone but if you need dimensions for the iPad and iPad mini, have a look at Responsinator

  4. willfan09
    Member
    Posted 6 months ago #

    I have fixed the issue on tablet. It turned out that I was not properly linked to my image. Once I linked that up it seemed to fix the issue. Thank you all for your help.

  5. willfan09
    Member
    Posted 6 months ago #

    okay, I lied. the problem is back. Any other possibilities?

  6. batharoy
    Member
    Posted 6 months ago #

    http://s29.postimg.org/6i6dnkxd3/Untitled.png

    As you can see by the screenshot, the footer has a <div tag with a set width. It is causing havoc with the whole page @ mobile sizes.

    I also noticed content going out to the right and the header background wont shrink properly because of it.

  7. CrouchingBruin
    Member
    Posted 6 months ago #

    Combine the suggestions from both Tareq & DMBarber, and use this CSS:

    @media screen and (max-width: 600px) {
       .site-branding {
          display: none;
          }
    }

    This will hide your site title & tag line at screen widths below 600px, which is also the break point for the menu to toggle to the hamburger/drop-down.

  8. willfan09
    Member
    Posted 6 months ago #

    @batharoy
    I just took a look at that image. I see what you are saying. Is there anything I can do to fix the footer on mobile screens only?
    @CrouchingBruin
    I tried combining the codes from the three of you DMBarber, Tareq and yourself...

    .site-branding {
    overflow: hidden;
    }
    .site-branding {
    margin-top: 150px;
    }
    
    @media screen and (max-device-width: 480px){
        /*--- iPhone only CSS here ---*/
    }
    
    @media screen and (max-width: 600px) {
       .site-branding {
          display: none;
          }
    }

    It did not work. The below...

    .site-branding {
    margin-top: 150px;
    }

    ...specifically made the header space very large on my desktop but that is the only piece that had any noticeable effect. I'm really struggling with this. I only have minimal CSS knowledge so just been running the gamut trying to get a fix for this. Hoping someone who has experienced this same issue can shed some light. :/

  9. CrouchingBruin
    Member
    Posted 6 months ago #

    Sorry, when I said to combine the CSS, I meant that my CSS was what you needed, it was a combination of the two other CSS rules (the use of the site-branding class along with a media query). Just include this CSS in your child style.css file and not the other two rules:

    @media screen and (max-width: 600px) {
       .site-branding {
          display: none;
          }
    }

    I didn't see it there.

  10. DMBarber
    Member
    Posted 6 months ago #

    Ok, willfan09, we know this can be frustrating, but don't panic, we are here to help. I apologize for the length of this post, but it seems necessary. You originally asked how to "hide" the site title and tagline, especially in an iPad/iPad mini. Before I get into that, I would like to explain some things for your benefit, since you admitted having minimal CSS knowledge, just like all of us when we started.

    When you read "how-to" directions online, or someone's response to your question, etc., and you see something like 'url-to-your-logo.png' or '/*--- iPhone only CSS here ---*/' they are just generalized filler statements. These lines need to be replaced with the information you want use. For example 'url-to-your-logo.png' should really look like http://veggiefans.com/images/headerimage.png or images/head.png or something like that. Your information will look differently. Do you understand? If not, I would be happy to explain further. Once you understand, changing your template becomes much easier.

    Now, lets deal with the site title and tagline (your original question). First, remove everything we asked you to add. Yes, sorry, but we do not want any interference. Looking at your css and playing with developer tools this is what I suggest you add to your stylesheet (you can copy and paste this, nothing needs to change):

    .site-header .site-branding {
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: contain !important;
    max-height: 150px;
    }
    
    .site-title a, .site-title h2 {
    background: none !important;
    width: auto;
    height: auto;
    font-size: 1px;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 0;
    }

    Some of this css is not from your stylesheet which is why you see the !important clause. This tells the browser that this should not be overridden by any other css because it is, well, important.

    And this is what this does: It makes the image used in your header "flexible" and sets the container to a max height (which is about the size of your image, you can adjust the 150px if you need to make it taller or shorter). Also, the second part, "hides" your site title and tagline by making them 1px tall, and "invisible" because they are white, and so is your background color. It puts it in the top left corner so even on a phone screen, it will not interfere. I removed the text-indent: -9999; line because it is not needed.

    Now as batharoy pointed out there is a problem with the footer as well. Add this below the above code to your stylesheet:

    #infinite-footer .container {
    width: 100% !important;
    text-align: center;
    }

    This makes your footer "flexible" and keeps the text in the middle, otherwise it shoots way off to the side.

    If you have any questions, please ask. Sorry for the novel, I wanted to make sure you understood what/why changes are being made.

    Also, after you have made and saved these changes you can, as Tareq pointed out, "view" your site on all devices by going to http://www.responsinator.com/ and typing in your website url. The really neat thing is that in all the windows, you can scroll the pages and your links work too! You can navigate to other pages!

    Finally, you said

    ...specifically made the header space very large on my desktop but that is the only piece that had any noticeable effect. I'm really struggling with this.

    If there is more you need to change/know, please give state a specific question so we can better assist you.

    I hope this helps.

  11. willfan09
    Member
    Posted 6 months ago #

    @CrouchingBruin
    Duh! My bad. I have been submersed in this stuff and didn't catch that. I did try it and it didn't work so...
    @DMBarber
    ...I deleted everything above and started from scratch with the below

    .site-header .site-branding {
    background-position: center !important;
    background-repeat: no-repeat;
    background-size: contain !important;
    max-height: 150px;
    }
    
    .site-title a, .site-title h2 {
    background: none !important;
    width: auto;
    height: auto;
    font-size: 1px;
    line-height: 0;
    position: absolute;
    top: 0;
    left: 0;
    }

    This has given me my best results yet on the ipad mini. I added in some code, along with the above, to keep my header "clickable" on the desktop. So, as of right now, my desktop and ipad mini appear to be in very good shape.
    The ipad 2 and iphone still have issues. Iphone header image is cut off on both sides and "site title" and "description" still show on top of header image. Ipad 2 just has "site title" and "description" showing on top of header image.
    Thank you for explaining some of the coding to me as I am only about a week into understanding this stuff and it is very helpful.
    I did figure the url-to-your-logo.png' one out and got that linked to my actual image.
    As for '/*--- iPhone only CSS here ---*/' what should I replace that sort of thing with? Don't understand. Also, I used responsinator but it seems the results are not what I am seeing on my screens. Does IOS version on the devices come into play? My iphone and ipad 2 are NOT on IOS 5. Not sure if that matters? Thanks again for taking the time to help me out.

  12. willfan09
    Member
    Posted 6 months ago #

    Okay. Sorry for the change of direction. I found part of the issue. I had recently installed a plugin called "WP Mobile Detector Mobile Plugin". It dawned on me I should probably deactivate it to see what results and now Ipad 2 view is almost perfect.

    Iphone is now the only immediate issue. The width of the header and some content is about half of the size of the screen with content extending outside the margins (sorry for the bad explanation I couldn't think of a better way to say it). Here are a couple images of the home page and within an article. Let me know if you have any questions. Your help has been priceless!

Reply

You must log in to post.

About this Topic