Change home page for mobiles

[PhilBlackmore]

Hi,

Is it possible to change the home page to another page for mobiles only?

If so how do I do that? 😉

My site is http://www.mrphilparties.co.uk

Alternatively I want to change to text size of my titles on the page and the size of the unicycling photo on the page, just for mobiles (as they take up too much space on the mobile view). I’m guessing creating a separate homepage is the easiest way to do that or is there another better way?

Thanks again,

Phil

[scrambler]

You would need a plugin for that, but depending on the changes, you can just use Custom CSS to male the changes on mobile using weaver Xtreme mobile classes.

If the changes you describe are all you need this is definitely the easiest path.

You can add your css rules in Main options > Fonts & Custom > Custom CSS rule box.

Start your rules with the following selector

.is-mobile.home

Right now you have set your font size with pixel, which is actually part of your problem, if you would use em  instead they would probably automatically adapt. if you are set on the bad idea of fixed pixel font-size, instead of using an inline style, use a class, and then style the class

For example instead of

<span style=”font-size:24px;”>….

use

<span class=”myfont1″>….

Then in Main options > Fonts & Custom > Custom CSS rule box. put

.myfont1 {font-size:24px;}
.is-mobile.home .myfont1 {font-size:12px;}

if a rule does not take you may need to add !important like

.myfont1 {font-size:24px !important;}

You can use the same system with your image

[PhilBlackmore]

Hi,

That worked for the text. Thank you very much.

Could you possibly explain a little more on how to use it for making the image smaller please?

I’d like to make it so it’s about 50% smaller on the phone view.

I think this is the part of the page with the image. Do I need to change the bit where it says image_size=”full” or the image_container_style?

I used a page builder to add the content. 

[wr_column span=”span5″][wr_image image_file=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png&#8221; image_size=”full” link_type=”no_link” image_container_style=”no-styling” image_alignment=”inherit” image_margin_top=”40″ appearing_animation=”0″ disabled_el=”no” ][/wr_image][/wr_column][/wr_row]

I hope you help. Sorry if I’m being a bit slow 😉

[scrambler]

If you are using a page builder, you would have to check if you have a way to add a specific class to specific images.

If not, Inspecting your page, it looks like your page builder uses a class  wr-element-image  On the container of images.

If wanting to scale all images in such containers, you could add a rule like below to Main options > Fonts & Custom > Custom CSS rule box

.is-mobile.home .wr-element-image img {width:50%;}

But that will target images in every container with that class.

[PhilBlackmore]

Thank you.

I just want to change the size of the one image not all of them.

[scrambler]

It would be best if you would find how to add a class to an image with your page builder, but if you don’t and do not change the sctucture of the page, you can use

.is-mobile.home .entry-content div:nth-of-type(1) img {width:50%;}

[PhilBlackmore]

It’s the big picture of me on the unicycle. 

[wr_column span=”span5″][wr_image image_file=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png” image_size=”full” link_type=”no_link” image_container_style=”no-styling” image_alignment=”inherit” image_margin_top=”40″ appearing_animation=”0″ disabled_el=”no” ][/wr_image][/wr_column][/wr_row]

I’m using the woorockets pagebuilder. I can’t find anything about whether it will allow me to add specific classes to images. 

I checked their user manual, but it wasn’t that helpful. http://www.woorockets.com/docs/wr-pagebuilder-user-manual/

[scrambler]

Did you try the rule I gave you above ?

.is-mobile.home .entry-content div:nth-of-type(1) img {width:50%;}

[PhilBlackmore]

I just tried it. It made all the pictures on the page go to 50% in mobile view.

[PhilBlackmore]

How would I get the font size change to work on other pages on the site as well as the home page?

I tried removing the .home part of the rule and also tried inserting the CSS (without the .home) on individual pages, but it doesn’t seem to work.

[PhilBlackmore]

I’m removed the image in the page builder and reinserted it in the same place with the classic editor and the add media button.

The image now says this:

[wr_column span=”span5″]<a href=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png”><img src=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png&#8221; alt=”Mr phil on Unicycle” width=”398″ height=”649″ class=”aligncenter size-full wp-image-14″ /></a>[/wr_column][/wr_row]

I guessing I can now do something with the” class= ” part of this? 

I’ve tried a few things, but none of them have worked so far!

[scrambler]

OK, you need to slow down a bit here…

the first rule I gave you:
.is-mobile.home .wr-element-image img {width:50%;}    
Would target all images

The SECOND rule I told you to try: .
is-mobile.home .entry-content div:nth-of-type(1) img {width:50%;}    
cannot possibly target more than the first one. So if you say it affect all of them you made a mistake somewhere.

Put that rule and only that rule in place and post back so we can see what is wrong in your implementation.

---

Now if you want to go with the image inserted manually, what you do is change the image tag to add the yellow part making sure there is a space between the new class and the existing ones.

[wr_column span=”span5″]<a href=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png“><img src=”http://mrphilparties.co.uk/wp-content/uploads/2015/03/mrphilunicutout.png” alt=”Mr phil on Unicycle” width=”398″ height=”649″ class=”aligncenter size-full wp-image-14 myimage” /></a>[/wr_column][/wr_row]

Then the rule you would use is

.is-mobile.home img.myimage {width:50% !important;}

---

Regarding changing the Font size on all pages on mobile, the rule would be

.is-mobile .myfont1 {font-size:12px;}

If that does not work try adding important too

.is-mobile .myfont1 {font-size:12px !important;}

In all cases, if something we give you does not work, Leave it in and post back so we can check why…

[PhilBlackmore]

I used the manually inserted image and it worked great.

And I’ve got it to all the work across my site too.

Thank you for your help. You’re a star!

[Author]

Posts