Jump to content

I need to hide certain images on my mobile version

Recommended Posts

Site URL: https://www.supersizesocial.com/powerlikes-demo/

Squarespace doesn't let you edit the mobile version separately to the desktop version which can be very inconvenient sometimes!

I've just made a new simple landing page, as you can see it looks fine on desktop. But if you shrink your browser or open it on mobile it looks terrible.

The simple solution for this would be to remove the two images from the mobile version, they aren't important anyway but on desktop they are important to fill out the page. The images are the logo at the top of the page, and then below the hand holding an iPhone. 

Can anyone help me with this? Is there a line of css code that will remove the images for mobile only?

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 9/10/2021 at 6:41 PM, supersizesocial said:

Hi mate,

Great thanks for your help! Attached is two screenshots of how it looks on mobile and how it looks on desktop. The images to be removed for mobile are the "SUPERSIZE SOCIAL" logo and the hand holding the iphone 

https://www.supersizesocial.com/powerlikes-demo

Screenshot 2021-09-10 at 12.39.38.png

Screenshot 2021-09-10 at 12.39.31.png

Hi,

You want to remove image on mobile only?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Hi Tuanphan! Very glad to hear from you haha I need your expertise once again. 

Yes I need the "Supersize Social" logo removed and the image of a hand holding an iphone removed, from mobile only. As you can see, it looks fine on desktop but on mobile it looks terrible so it's best to remove it and keep it as simple as possible on mobile. 

The 'supersize social' logo is just a normal image. The iPhone / hand is a heading block that has a block of text overlapping the image.

Link to comment
On 9/13/2021 at 8:40 PM, supersizesocial said:

Hi Tuanphan! Very glad to hear from you haha I need your expertise once again. 

Yes I need the "Supersize Social" logo removed and the image of a hand holding an iphone removed, from mobile only. As you can see, it looks fine on desktop but on mobile it looks terrible so it's best to remove it and keep it as simple as possible on mobile. 

The 'supersize social' logo is just a normal image. The iPhone / hand is a heading block that has a block of text overlapping the image.

Hi,

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* Hide Supersize logo */
div#block-yui_3_17_2_1_1631108394982_7909 {
    display: none;
}
/* Hide people with hand mobile image */
div#block-7e169b3e9a202adbd76b {
    display: none;
}
[data-section-id="6138b217fc9a13700027ef17"] {
    display: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.