WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to hide images on frontpage for mobile devices (9 posts)

  1. Silvio
    Member
    Posted 10 months ago #

    hi

    i want to hide images only on the frontpage
    http://www.sprecherplanet.de

    the theme has the images i want to hide in a "add posts image" kind of option. they are stored and picked from the media gallery.

    i want them to be visible for desktops and tablets. but not for phones.
    how would i do this?

    thank you guys.
    silvio

  2. Chris Kepinski
    Member
    Posted 10 months ago #

    As far as I understand you need to hide those big icons visible to the left & right of articles one the home page (smartphone version).

    Add to your css for smartphones:

    article.home-item-full {background-image: none;}

    & tell me if it works.

  3. Silvio
    Member
    Posted 10 months ago #

    hi

    that is exactly what i need. thanks.

    but i only have one css. if i add that now to it, all the images will go away for all devices, right?

    silvio

  4. Silvio
    Member
    Posted 10 months ago #

    hi again.

    i did add the line in the section of my css labeled Mobile layout. no affect at all.

    any ideas why?

  5. alchymyth
    Forum Moderator and Sweeper
    Posted 10 months ago #

    you might need to add !important to the styles to enforce them, as the background image is inserted by an inline style.

    the best might be if you contact the developer of your theme for support with your question;

    http://codex.wordpress.org/Forum_Welcome#Commercial_Products

  6. Silvio
    Member
    Posted 10 months ago #

    thank you. i already contacted the guys who made the theme. i have something else i need to be done. so lets hope they know how to help me. if not them, you then.

    thank you for your help anyway. i will set this thread to resolved now.

    silvio

  7. Chris Kepinski
    Member
    Posted 10 months ago #

    in your theme css file

    http://sprecherplanet.de/wp-content/themes/only/style.css?ver=1.1.0

    around line 2077 there is something like this:

    /* #######################################################################
    
    	7.	Mobile layout
    
    ####################################################################### */

    right after the above code add this:

    article.home-item-full {background-image: none;}

    and tell me if it works.

  8. Silvio
    Member
    Posted 10 months ago #

    hi chris.

    thank you for your time. much appreciated.

    i added this here now:
    <<<<<<<<<<<<<<<<<<<<
    @media screen and (max-width: 24em) { /* 768px */

    .home-item { background-image: none !important; }

    <<<<<<<<<<<<<<<<<<<

    i gad to adjust it a little bit (it was 48em before, but that gave me very large pics then for some reason). now it works on mobile, tablet and desktop the way i want it too.

    i only have one small other problem. i need the text in the mobile version to be moved a little bit more inside. like a view pixels left and right between text and border. right now it is attached to the edge of the screen. that is really annoying.

    any idea what to do about that?

    silvio

  9. Chris Kepinski
    Member
    Posted 10 months ago #

    Let me assume: you need a little margin between body text and background edge.

    div.inner p {margin: 0 10px;}

    also if you want your logo to be resized responsively:

    img.the-logo {width: 100%;}

Reply

You must log in to post.

About this Topic