Editing css for mobile

[mmnmbk]

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:

Topic

[mmnmbk]

Screenshot

[Jason Bobich]

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.

[mmnmbk]

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

[Jason Bobich]

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

[mmnmbk]

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

[Jason Bobich]

What’s the URL to your site?

[mmnmbk]

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

http://socialpressthemes.com/

thanks for looking

[Jason Bobich]

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

[Jason Bobich]

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)

[mmnmbk]

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.

[Jason Bobich]

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

[Author]

Replies