Support » Theme: Responsive » Mobile view

  • Resolved gavpedz

    (@gavpedz)


    OK so i have made many changes to the theme and featured home page my problem now is that the featured/homepage on a mobile does not look great how can i keep the current design but on mobile have it full width with featured text then image under that?

Viewing 15 replies - 1 through 15 (of 19 total)
  • Sorry link is here http://gypsytboutique.co.uk/

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Do some media queries;

    @media screen and (max-width: 480px) {
     #featuredimage,
     #featured {
      width: auto;
      padding: 0;
     }
    }

    Fantastic thank you!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Gavpedz,
    You need to transfer your modifications into a Child Theme before the theme updates. Otherwise you will lose your changes if you update the theme and you don’t want to be stuck on an old version of the theme.

    Ah ok, i have not done this before any tutorials or anything on how i do this?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    There are 8 basic steps to create a Child Theme
    http://codex.wordpress.org/Child_Themes#Example_of_a_basic_Child_Theme

    What changes have you been making, CSS only?

    And some html in the home.php I am no expert so most likely been quite messy in my approach!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Copy your changed files into your Child Theme directory.
    Then copy the theme’s original files and paste that in your normal theme’s directory.

    Your Child Theme modified file will take precedence over the original file. It means you can now make changes to the Child Theme files and those changes will not affect the theme’s original files.

    If you want to modify another file in future, take a copy of it and paste it into your Child Theme. Then you can modify it (within your Child Theme).

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    Your CSS modifications can just be copied into your Child Theme style.css file, because you’re importing the rest of the styles anyway.

    Thank you so all i need to do is create a new directory Responsive-child and put all current theme files in their then in the responsive theme put original files in their?

    So then in the responsive-child/style.css i add this?

    /*
    Theme Name: Responsive Child
    Description: Child theme for the responsive theme
    Author: Your name here
    Template: responsive
    */

    @import url(“../responsive/style.css”);

    Then all my edited css would be here?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    All you need to do is create a new directory Responsive-child.
    Then follow the Child Theme guideline steps (you don’t really have to complete all 8).
    Then for each modified file, copy that and paste it into your Responsive-child directory.
    Really that’s all you need to do.

    So then in the responsive-child/style.css i add this?

    yes

    Then all my edited css would be here?

    yes

    Ok thank you. I am having a little trouble finding the best way to get the featured image to stay in the right, i tried using padding but in some browsers/screen resolutions it did not work as well as i thought. I have now tried to float right the featuredimage which seems to work better but when i have tested this on http://quirktools.com/screenfly/ seems fine in most resolutions but on ipad and kindle hd8.9 the image is right but under the text box also i noticed in the phone screens i have a small amount of left to right scroll anyway to fix this? any tips welcomed.

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    @media screen and (max-width: 980px) {
     .grid {
      float: left;
     }
    }

    Thanks 😉

    Hi i am having trouble creating child theme.

    I edited the theme originally. Edited css and some files so i moved all files and folders to themes/responsive-child. Then i uploaded original responsive files to themes/responsive then in themes/responsive-child/style.css i added Template: responsive and changed Theme Name to Responsive-child now the site will not show anything and gives an error

    http://gypsytboutique.co.uk/

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Mobile view’ is closed to new replies.