• 0
Sign in to follow this  
Followers 0

Mobile View - remove specific image (not background image)

Question

Posted · Report post

Hi, 

 

I've searched for a topic which addresses this & don't think there is one. Apologies if there is. Is there a way of removing specific images from mobile view. For instance if you go to my home page - www.thewoosgethitched.co.uk, I would like to remove the flowers which come up about half way down the page when viewing on a mobile - they take up way too much space on that view. 

 

Cheers

 

James 

Share this post


Link to post
Share on other sites

22 answers to this question

  • 0

Posted · Report post

James, not sure where you have sent that screenshot. However, can you add it to your post, you can use Droplr or imgur to upload your images and then provide a link in your reply.

 

Your setting should look similar to this:

 

http://d.pr/i/RbkU

 

When I reduce my browsers width the image is gone.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI,

 

Which flowers are you talking about, these ? -  http://d.pr/i/orIs

 

If so, click edit on the section area and in the styling classes field, add the following:

 

hidden-phone

 

And see if that does the trick.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, 

 

Thanks for that. That works for a whole section area, but not for an individual picture within a section area. I.e. for the picture referred to, I want picture removed, but want to keep the form - both are in the same section area. 

 

Sorry about this mate.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Not sure what you mean, as I am not seeing any form in the same section area as that flower image. The RSVP form is in a completely different section area, therefore there shouldn't be any issue with the solution I gave above ?

Or have I misunderstood ?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ahh - sorry - I didn't click the link for your image. I meant this one:

 

[pl_site_url]/wp-content/uploads/2013/10/flower8.jpg

 

There are two flowers either side of the contact form towards the bottom of the homepage. I'd like both of them removed in mobile view, but would like to keep the contact form. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You could add three column layout. One column with the image - one with the forum and another with the final image. Then all you have to do is add the hidden-phone class to the sections with the flowers in them. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, 

 

I added 3 columns & put hidden-phone in the styling for two containing images - they are still showing up on mobile view.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello James

 

Would it be possible to get an admin logon for your site? if you can send to hello @ pagelines.com we can take a closer look. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI Martin,

 

I've just set you up as an admin. 

 

I'll send a separate e-mail just in case wordpress hasn't sent you one. 

 

Cheers

 

James 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI James 

 

I have checked your site and noticed you had added the classes as .hidden-phone - i changed it to hidden-phone but this didn't work. After saving i went back into the visual editor to see the styling class was still .hidden-phone. I changed this again and it was still the same after publishing. 

 

I noticed you had caching plugin deactivated but had the cloud-flare plugin active. 

 

Could you please disable the cloud-flare caching functionality and try this again. Make sure you clear any cache before trying again. 

 

Also if you are using cloud-flare hosting then there will be caching active on your server - you can request they temporarily disable this for you. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Martin,

 

Stupidity on my part, but I changed it to .hidden-phone after hidden-phone (without the dot) didn't work. I'll try what you suggest & let you know. 

 

Cheers

 

James 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks - i think it's the cloud-flare caching. i changed it to and it was back afterwards 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi martin,

 

I turned off the plugin & the dot has gone. However still not working. Sorry about this. 

 

Cheers

 

James 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Unfortunately, I am not seeing that image - /wp-content/uploads/2013/10/flower8.jpg anywhere on your site.

 

However, what you can do is this:

 

1. Add a MediaBox to where you want the image(s) to be used.

2. Add the following code to your MediaBox Text and Embed HTML field.

 

<img class="hidden-phone" url="Path to image">

 

3. Publish the changes and then refresh your site.

4. Reduce your browsers window and the image should be removed when you reach a browser width similar to a phone.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

I put the following in the relevant media box :

 

<img class="hidden-phone" url="http://thewoosgethitched.co.uk/wp-content/uploads/2013/10/flower7.jpg">

 

The image is still not going in mobile view! Have I put the right code in?

 

(I also tried copying & pasting above (<img class="hidden-phone" url="Path to image">), but this didn't work - presuming that on 'path to image', I actually have to put the path in? Sorry, I'm a bit of a novice at this.

 

Cheers

 

James 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah sorry I should have been a bit more specific.

Basically, remove the image you have uploaded, then add the code I gave above to the HTML field in the MediaBox, then in the path to image, add your images URL. Then click publish. The code most certainly works as I have just tried it myself.

 

Just out of curiosity can you take a screenshot of your MediaBox settings where the code has been added so I can take a closer look.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Danny,

 

Clearly I'm doing something stupid - I tried above, but still not working. 

 

I've sent an e-mail with screen shot as I can't work out how to show it on here. 

 

Cheers

 

James 

 

    

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry - just copied your screen shot & it works!!!!

 

Massive thank-you!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Just a question - the code has 'src' rather than 'url' - what does src mean?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

src= source

Where it comes from and no problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Great - again thanks very much!

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0