Premium Theme Support › SiloCreativo › Silvio

CSS Code for Hide

  • Author
    Posts
  • #119339
    breakandtrek
    Member

    Hi again,
    As it is so easy for you, can you please give me the CSS code to hide TYPE DE PROJETS : LIENS, on this page please : https://breakandtrek.com/project-type/liens/
    Thank you again for your help !
    Best regards
    Stéphanie (we are now in Japan :-) !!)

    The blog I need help with is: (visible only to logged in users)

    #119448
    ricardpriet
    Theme Author

    Hi Stéphanie,
    here you are:

    .term-26192 .page-header h1.page-title {
  font-size: 0;
}
.term-26192 .page-header h1.page-title:after {
  content: "LIENS";
  font-size: 28px;
  font-size: 1.75rem;
}

    Hope you are enjoying Japan :)
    Thanks again!
    Ricardo P. from SiloCreativo

    #119451
    breakandtrek
    Member
    Original poster

    Thank you so much Ricardo !
    Bye for now
    Stephanie

    #119453
    breakandtrek
    Member
    Original poster

    I meet a problem… When I go on my mobile phone, I can not read correctly the title.
    It is on this page on my mobile phone : https://breakandtrek.com/project-type/liens/
    I mean, it looks like the word is cut.
    Can you do something ?
    Thank you

    #119454
    ricardpriet
    Theme Author

    Hi Stephanie,

    try to clean your browser cache on your mobile phone:
    https://en.support.wordpress.com/browser-issues/#force-refresh

    Reload the page twice or three times to load your new CSS rules.

    It works fine on muy Andriod Phone :)

    Let us know.
    Ricardo P.

    #119456
    breakandtrek
    Member
    Original poster

    Sorry, it does not work fine on my iPhone… I have clean the browser cache, it does not change anything….
    Hope you can help.
    thank you

    #119459
    ricardpriet
    Theme Author

    Hi there,

    just tested on browserstack and showing this:
    https://www.browserstack.com/screenshots/cb306151848339f4802d3571f300ca45f486a35c/ios_iPhone-6_8.3_portrait.jpg

    So people are seeing it correctly.

    Could you please test it on other iPhone or mobile to discard cache browser issues or logging view errors?

    Thank you!

    #119460
    breakandtrek
    Member
    Original poster

    Hi,
    Actually, the title is : « Aline Lamiable Ferraton – Artiste Peintre » and on my iPhone the word « Peintre » is cut in the middle. I did a test on another Iphone and this is the same word which is there completely hide….
    On you example, the word « peintre » is cut too for me.
    Let me know if you can do something !
    Thank you very much Ricardo !
    Bye
    Here in Japan, it is time to sleep.

    #119464
    ricardpriet
    Theme Author

    oh!!! sorry, I understood you are referring to “LIENS” title all the time instad of the post title “Aline Lami…” sorry!

    Yes, you are right. in small devices two columns layout does not work fine. For that reason, I would recommend you come back to the original theme layout, whit two columns for desktop and one columns for phones.

    You can set your custom screen width. Bellow for example 480px the item would get 100% of width:

    @media (max-width: 480px) {
    .post-grid {
        width: 100%;
    }
}

    Another option is to reduce the font size, for example:

    @media (max-width: 480px) {
    .post-grid .text-container h1.entry-title {
    font-size: 14px !important;
}
}

    But in my opinion first options is the best approach,
    Hope this helps and sorry for the misunderstood :)
    Ricardo P.

    #119504
    breakandtrek
    Member
    Original poster

    Thank you for your answer. So my question is now, can I apply these CSS Code, only on the link LIENS, or if I put the CSS Code it changes for everything ? Is it possible to apply only for the LIENS ?
    Tell me.
    Thank you very much
    Best regards
    Stéphanie

    #119505
    ricardpriet
    Theme Author

    Yes it is possible:

    @media (max-width: 480px) {
    .term-26192 .post-grid {
        width: 100%;
    }
}

    or:

    @media (max-width: 480px) {
    .term-26192 .post-grid .text-container h1.entry-title {
        font-size: 14px !important;
    }
}

    Let me know :)
    thank you!
    Ricardo P.

    #119506
    breakandtrek
    Member
    Original poster

    You’re the best Ricardo, it works very well ! Thank you very much for your help !
    Bye for now
    Stéphanie

    #119507
    ricardpriet
    Theme Author

    Fantastic, nice to hear that!
    Have a nice day :)

  • The topic ‘CSS Code for Hide’ is closed to new replies.