Home Forums Weaver Xtreme Theme Change home page for mobiles

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #17495
    PhilBlackmore
    Participant

    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

    #20697
    scrambler
    Moderator

    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

    #20698
    PhilBlackmore
    Participant

    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 😉
    #20699
    scrambler
    Moderator

    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.

    #20700
    PhilBlackmore
    Participant

    Thank you.

    I just want to change the size of the one image not all of them.
    #20701
    scrambler
    Moderator

    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%;}

    #20702
    PhilBlackmore
    Participant

    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/
    #20703
    scrambler
    Moderator

    Did you try the rule I gave you above ?

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

    #20704
    PhilBlackmore
    Participant

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

    #20705
    PhilBlackmore
    Participant

    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.
    #20706
    PhilBlackmore
    Participant

    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!
    #20707
    scrambler
    Moderator

    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…

    #20708
    PhilBlackmore
    Participant

    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!
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.