Home › Forums › Weaver Xtreme Theme › Change home page for mobiles
- This topic has 12 replies, 2 voices, and was last updated 7 years, 4 months ago by
PhilBlackmore.
-
AuthorPosts
-
March 20, 2015 at 15:32 UTC - Views: 5 #17495
PhilBlackmore
ParticipantHi,
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
March 20, 2015 at 17:46 UTC - Views: 2 #20697scrambler
ModeratorYou 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
March 23, 2015 at 22:32 UTC - Views: 5 #20698PhilBlackmore
ParticipantHi,
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” 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 😉March 23, 2015 at 22:47 UTC - Views: 1 #20699scrambler
ModeratorIf 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.
March 23, 2015 at 22:51 UTC - Views: 1 #20700PhilBlackmore
ParticipantThank you.
I just want to change the size of the one image not all of them.March 23, 2015 at 22:55 UTC - Views: 1 #20701scrambler
ModeratorIt 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%;}
March 23, 2015 at 23:12 UTC - Views: 12 #20702PhilBlackmore
ParticipantIt’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/March 23, 2015 at 23:51 UTC - Views: 1 #20703scrambler
ModeratorDid you try the rule I gave you above ?
.is-mobile.home .entry-content div:nth-of-type(1) img {width:50%;}
March 24, 2015 at 11:03 UTC - Views: 1 #20704PhilBlackmore
ParticipantI just tried it. It made all the pictures on the page go to 50% in mobile view.
March 24, 2015 at 11:09 UTC - Views: 1 #20705PhilBlackmore
ParticipantHow 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.March 24, 2015 at 11:33 UTC - Views: 4 #20706PhilBlackmore
ParticipantI’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” 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!March 24, 2015 at 17:09 UTC - Views: 2 #20707scrambler
ModeratorOK, 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 imagesThe 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…
March 25, 2015 at 11:25 UTC - Views: 1 #20708PhilBlackmore
ParticipantI 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! -
AuthorPosts
- You must be logged in to reply to this topic.