Home / Forums / ePix Support / Mobile Site Editing

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts

  • Kim Townsend
    Participant

    To edit the mobile site styling (responsive.css) is there a way to see/edit it in a WYSISYG or a testing environment? For example, when I edit this theme, I use my browser to “Inspect” the code. When I find the right code, I can change/update it. I’ve looked at the css for the responsive layout and I don’t know exactly what is what.
    Essentially, all I want to do is bring what’s under the logo, up and make the logo smaller. Overall then everything comes up almost to the top line.
    Any help would be greatly appreciated. What info can I provide?
    Thanks,
    K

    Andy
    Andy
    Keymaster

    Hi,

    You can add custom CSS to Appearance > Theme options > Customize > Mobile CSS instead. This saves modifying the core files of the theme and targets mobile only.

    If you would like myself to make the changes for you, you can request them via the Customization forum here.

    Kind regards,
    Andy


    Kim Townsend
    Participant

    Right, that part I understand, but I don’t know what to put in there. I don’t know what code controls what on the mobile site. Does that make sense? I hope I’m explaining it right.

    Andy
    Andy
    Keymaster

    Hi,

    When you make the changes via the “Inspect Element”, you’re editing a particular class when you do that, you need to copy that class, along with the changes you’ve made and place it into the mobile CSS field.

    Unfortunately it does require that you understand CSS and the way it works, there’s no easy way around that but to learn it fully before modifying things.

    If you do want me to customize this for you, I can do via this forum. You can signup for one month and then cancel immediately, therefore the changes you want made will only cost 10$.

    Kind regards,
    Andy


    Kim Townsend
    Participant

    I’m sorry but I still don’t think you are understanding what I’m saying.

    I need to know what parts of the responsive css applies to which part of the mobile device. I know css and how to do it, but nothing is labeled in the responsive file and I can’t see the changes (like I would in inspect/browser) since it’s only on the phone. Does that make better sense? I just need to know what controls what on the responsive css file.

    Andy
    Andy
    Keymaster

    Hi Kim,

    They don’t really apply to parts of the mobile device. The way it works in this case is that the media query detects the size of the browser and if it’s “mobile or tablet” size, it changes the elements of the site structure. i.e. .columns, handles all the columns and makes them full width.

    If you wanted to target the header, it’s the same as the desktop version i.e. #header

    The best practice to target mobile is to use Chrome > open the inspect element > resize the browser to 767 and the responsive.css file will kick in. You’ll be able to see what is being applied to what.

    I hope that makes sense?

    Kind regards,
    Andy


    Kim Townsend
    Participant

    Thanks Andy, I’ve tried using all the elements in the customize area and I just must be a dummy on this one.I’ve also tried changing the hard code. I’ve never had this much trouble customizing a theme. I tried using the wptouch plugin and it just shows all of the shortcode. I put in the code to strip the shortcode and it doesn’t work on this site. I don’t have time to keep playing with it so I’m just going to have you fix the home page if you don’t mind.


    Kim Townsend
    Participant

    Oh and I didn’t know that if you shrink the screen the responsive would kick in…that’s cool. I’ll keep that in mind for future projects 😉 Lo, it didn’t help me pinpoint…every time I tried changing stuff the code just didn’t apply.

    Andy
    Andy
    Keymaster

    Hi Kim,

    Can you give me an example of the CSS you’re adding and what you’re trying to change?

    WPtouch isn’t for this theme as that practically creates a responsive.css file like the theme does – that’s for older themes that aren’t responsive by nature. It really should be as simple as picking the CSS class you want to change and adding it to the mobile CSS field.


    Kim Townsend
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Kim,

    I’ll help you a little but as I mentioned at the beginning, I’ll only do customization via the forum.

    The following needs to be place into Appearance > Theme Options > Customize > Mobile CSS.

    To remove the margin around the logo you would use #header-logo {margin:0 !important;} and the padding at the bottom of that area you would use .header-inner {padding-bottom:0 !important;}


    Kim Townsend
    Participant
    This reply has been marked as private.
    Andy
    Andy
    Keymaster

    Hi Kim,

    Just simply post what you want done on the forum. It would be best to post your WP login details too and I can just login and do it for you. 😉


    Kim Townsend
    Participant

    Thank you Andy. I have created the new request.

    Kim

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.