This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Editing css for mobile

  • Creator
    Topic
  • #8492
    mmnmbk
    Participant

    HI

    On the desktop site my header is basically the same layout as the original template, but on the mobile version, the original akita theme header is centered and mine is off to the right somehow.

    How can I edit the mobile only css?

    Also on the mobile, what image is supposed to be in that first blank area?

    Thanks

    Screenshot:

Viewing 11 replies - 1 through 11 (of 11 total)
  • Author
    Replies
  • #8493
    mmnmbk
    Participant
    #8495
    Jason Bobich
    Keymaster

    Hello,

    Have you been making CSS customizations to the header or logo? If so, you’ll also need to make sure you’re styling correctly for the mobile viewport.

    @media (max-width: 480px) {	
    	.whatever {
    		...	
    	}
    	.whatever-else {
    		...
    	}
    }

    ==========

    For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

    Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

    #8660
    mmnmbk
    Participant

    Thanks that was helpful.

    Can you tell me how to hide the area beneath the menu ( from the above screenshot). I believe it is the post area.

    thanks

    #8662
    Jason Bobich
    Keymaster

    You’ll want to use your inspector of choice (i.e. Firebug, Chrome’s Developer tools, etc) and find a selector you can use attached to whatever you’re trying to hide. Then you’d use the display CSS property to set it to display:none. when at the mobile viewport, as described above.

    http://www.w3schools.com/cssref/pr_class_display.asp

    #8665
    mmnmbk
    Participant

    I understand that thanks, but I don’t have that area on my desktop version only on the mobile version so I cant track it down. Is there a mobile inspector?

    thanks

    #8666
    Jason Bobich
    Keymaster

    What’s the URL to your site?

    #8667
    mmnmbk
    Participant

    This is our placeholder URL. Its actually a medical clinic FWIW

    http://socialpressthemes.com/

    thanks for looking

    #8668
    Jason Bobich
    Keymaster

    So what exactly is on your site on mobile that isn’t on the desktop that you can’t find with an inspector?

    #8669
    Jason Bobich
    Keymaster

    There may be some confusion in where you’re putting your Custom CSS that’s going to make things trickier for you. Right now you’re putting them in your style.css, which comes before the theme’s other stylesheets. Although I understand why you would do it the standard way you’re doing it, you want to put your styles in the custom.css file of your Child theme so they come after everything in the theme and thus override. (See video)

    #8670
    mmnmbk
    Participant

    I am just trying to identify the space above the search bar on mobile. I did not know you could emulate it by making the browser smaller. That’s all I needed to know.

    I do hope you aren’t taking an attitude with me.

    Thanks for your help.

    #8671
    Jason Bobich
    Keymaster

    I do hope you aren’t taking an attitude with me.

    What do you mean? I apologize if this is what it seems like to you.

    I was just trying to figure out what specifically you are seeing in one spot and not another, as I wasn’t seeing anything different. It’s your site that you’re staring at for many hours; I could easily be not seeing something you are.

    I did not know you could emulate it by making the browser smaller.

    This is an extremely important concept to understand in responsive design, just in general. I honestly assumed after our previous conversation and looking at the CSS edits you are making, that you understood this. — That being, we’re targeting different viewport sizes, opposed to any specific devices. You have your HTML markup of the template, and then as the viewport size (i.e. or browser window) scales down, we modify the CSS to change how things sit and stack.

    Sometimes answering these questions is difficult and can be like finding a needle in a haystack. I honestly have no way to really know what you know or what your development background is. I can only make judgments based on what I see you saying and the site you’re linking me to. What seems obvious to one person is not going to be obvious to another. If something is obvious to someone, it can come off as rude that it would even be said. This is all in the eyes of the person reading the response, which makes these conversations difficult sometimes.

    This is also part of the reason why Support does not include customizations, although 70% of questions seem to be about some sort of customization.

    http://support.themeblvd.com/help/#terms

Viewing 11 replies - 1 through 11 (of 11 total)
  • The forum ‘Akita Responsive WordPress Theme’ is closed to new topics and replies.