Loading...
  1. Welcome to the Upload WP Community Forums!  This is the best place to get premium WordPress and WooCommerce support.  Please take a look around and join the Upload WP Community for FREE today!

Mystile banner : featured image not appearing on mobile media

Discussion in 'General WooCommerce Discussion' started by Himani, Aug 11, 2014.

  1. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    The website is http://www.gempoint.co.uk

    I have a banner on homepage. This is displaying on IE/ Firefox/ mac. But when I try and view it on mobile phone, it doesn't display. I have deactivated super cache thinking that could be causing the issue but this hasn't resolved the issue. Please can someone advise . Thanks a lot
  2. Savidge4

    Savidge4 Upload WP Superstar

    Joined:
    Feb 20, 2014
    Messages:
    1,701
    Likes Received:
    271
    Trophy Points:
    115
    Gender:
    Male
    Occupation:
    Web Designer
    Location:
    Bridgeport WV
    Home page:
    Himani,

    By default that will only display on screens larger than 768px. you would have to go into "layout.css" and REMOVE the CSS in that file ( lines 307 to 372 ) and place those lines in your custom CSS file. This will remove the condition of the 768px screen size. KEEP IN MIND... this is a fix that can be reversed with an update ( not saying it will - but can ) in case this does occur, you would have to remove the code again.

  3. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    Thank you very much for your advice. I will have a look and get back.

    Kind Regards
    Himani
  4. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    Hi

    I am a little confused. I commented those lines out of layout.css but then it removes the banner altogether.
    If I place this in custom css, do I need to comment something else out in custom.css
  5. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    Hi SAVIDGE4

    I did what you had suggested and the banner image does display on the mobile app.
    What I still don't understand is that custom.css is meant to override the theme css. So how does copying and pasting the same in custom.css do the trick. Really sorry to bother you but it would be good to understand

    Regards
    Himani
  6. Savidge4

    Savidge4 Upload WP Superstar

    Joined:
    Feb 20, 2014
    Messages:
    1,701
    Likes Received:
    271
    Trophy Points:
    115
    Gender:
    Male
    Occupation:
    Web Designer
    Location:
    Bridgeport WV
    Home page:
    Him,

    Layout.css is NOT the main CSS file. this file is specifically for desktop layout changes. as the banner being an example. it will display on screens greater than 768px. So moving that CSS over to Custom.css removes the screen size limitation thatis placed in the layout.css file.

    I sure hope that made sense! ha ha

  7. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    Thank you for replying and providing the explanation. Just one last thing - you suggested that I "REMOVE" the lines. But as I wasn't sure, I "copied" and pasted those lines in the custom.css. This also worked. So I have left the layout.css as it is. Is that ok?

    Thanks
  8. Savidge4

    Savidge4 Upload WP Superstar

    Joined:
    Feb 20, 2014
    Messages:
    1,701
    Likes Received:
    271
    Trophy Points:
    115
    Gender:
    Male
    Occupation:
    Web Designer
    Location:
    Bridgeport WV
    Home page:
    Himani,

    that is absolutely fine and a better option.

  9. Himani

    Himani Member

    Joined:
    Aug 9, 2014
    Messages:
    7
    Likes Received:
    1
    Trophy Points:
    5
    Gender:
    Female
    Great. Thanks a lot for all your help.
    Savidge4 likes this.
  10. DaveyWavey

    DaveyWavey New Member Updated Profile

    Joined:
    Jan 28, 2016
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    2
    Gender:
    Male
    Sorry to bump very old thread, but where is layout.css. All I see is my style.css and custom.css

    I have this same problem. Also, is there a plugin that changes everything into a text editor so I can see numbered lines instead of copying and pasting every code into my own text editor to see which line it is?
  11. Savidge4

    Savidge4 Upload WP Superstar

    Joined:
    Feb 20, 2014
    Messages:
    1,701
    Likes Received:
    271
    Trophy Points:
    115
    Gender:
    Male
    Occupation:
    Web Designer
    Location:
    Bridgeport WV
    Home page:
    This file is specifically located here: wp-content/themes/mystile/css/layout.css on the server side of your hosting files.

    DaveyWavey likes this.
  12. DaveyWavey

    DaveyWavey New Member Updated Profile

    Joined:
    Jan 28, 2016
    Messages:
    7
    Likes Received:
    0
    Trophy Points:
    2
    Gender:
    Male
    Ok, I did copied the line 307 to 372 and into custom.css nothing happened. Lines 307 to 372 are in between brackets. I did 306 to 374 to get the whole brackets, still nothing. Just to make sure I did this right. I am in FileZilla, copied the lines, put it in my custom css editor in wordpress.