Change logo for mobile visitors

Resolved chall90909
(@chall90909)

10 years, 2 months ago

I ve put a logo on my vantage theme that works well (width/height) for desktop/tables etc, but on mobiles the responsiveness makes the logo image too small to make out. Is there any way I can change the logo based on screen size? Or when it gets less than px’s to allow the logo to use full width of the screen?
My temporary staging site address is :
http://iconicmedia.com.au/rbr_prod/
Appreciate any help have tried plugins and various things to no avail thus far.

Viewing 10 replies - 1 through 10 (of 10 total)

Axel13
(@axel13)

10 years, 2 months ago

You could add “min-width:500px” to the logo class, but you will still have white space to the left, which won’t look good.

To resolve this you can set the margin negative to 40px.

To make the logo part (right) visible, instead of the photo (left), you could change float to right.

You then will have too much space left. And I’ve no idea why that is so… but I hope it helps a bit nonetheless 🙂

esmi
(@esmi)

10 years, 2 months ago

@axel13: will you please stop encouraging people to edit their themes!

Axel13
(@axel13)

10 years, 2 months ago

I would suggest you add a billboard on top of the forum saying ‘whatever you do, unless you have a child theme, stop doing it’, so you don’t always have to repeat yourself?

I’m not a fan. I feel it makes it more complicated, which makes it not up to me to recommend it. I simply drop by when I’m around to reply to questions asked, because it was nice to get a reply when I needed that too. That’s all. If you don’t want me to do that, fine.

esmi
(@esmi)

10 years, 2 months ago

I would suggest you add a billboard on top of the forum

That would never work. People don’t read them.

I’m not a fan.

That’s your prerogative but please do not inflict your non-standard opinions on other people. all you are doing is making future trouble for them when they either update the theme and lose all of their changes or – even worse – edit the default WP theme and bring the entire site down with no easy way to get it back up again.

Axel13
(@axel13)

10 years, 2 months ago

So, you are saying only standard opinion is good opinion?
And the rest is not allowed?

Here is a good read:
http://www.un.org/en/documents/udhr/#atop

Article 19.

Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers.

Article 29.

(1) Everyone has duties to the community in which alone the free and full development of his personality is possible.

Moderator Jan Dembowski
(@jdembowski)

Forum Moderator and Brute Squad

10 years, 2 months ago

The UN Declaration of Human Rights. Wow. That’s really cute and completely off base.

This is a software support forum for goodness sake.

@chall90909? I apologize while I go off topic for a minute.

*Jan looks for coffee, finds none, weeps.*

@axel13 I don’t think a banner would help myself but people usually reply well when someone says to them “Hey, can you please stop recommending that people do things that may mess them up in the near future?”

That reply that moderators keep repeating is because your not quite giving out good advice. You do get points (karma points I mean) for assisting but really, you can go the slightly extra distance and add that step.

Or moderators will just continue to ask you to stop giving out really bad advice. It’s not cool when you recommend solutions that will get the user asking for help bad info that they’ll regret.

Back to the topic at hand:

@chall90909 Just as Axel13 suggested some CSS may be needed to modify that results and the CSS part looks good as far as I can tell.

Lately (just yesterday) I’ve been using this reply for child theme recommendations (which Axel13 apparently chose to disregard).

Don’t edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

If you do make that CSS or PHP change don’t modifying the original theme files. When the theme gets updates you will lose all of your work.

Thread Starter chall90909
(@chall90909)

10 years, 1 month ago

Thanks for your help so far guys… I think its easier than trying to make this theme work I just create a separate theme for mobile and a separate logo
Web Guru
(@laraib110)

10 years, 1 month ago
if you make a child theme and provide all your code in that theme it’ll be best way to go with … @jan Dembowski told that too ….
next you can do like, if you want that your logo should be in center and mobile device width should be below 600px the code will look like
```
@media (max-width: 600px) {
 .logo {
     margin: auto;
     /*.... it will make your logo in the center of screen and so will look better while your logo should have a background color set too so that no white space as well */
}
}
```
other way can also be applied like full width to your logo as 100%, then the img will be inside whole logo …. and so full width of img will make all that logo img which means no more smaller …
Moderator Jan Dembowski
(@jdembowski)

Forum Moderator and Brute Squad

10 years, 1 month ago
There are plugins that will provide a mobile view to your site but this may work too. I’ll also let you in on a not-so-secret: My CSS is horrible. But I do wield a mean text editor. 😉

Try this:

1. Using FTP or whatever file management tools your host has provided you with and create a directory like so.

wp-content/themes/vantage-child and in this specific case that would be this directory.

/home/iconi041/public_html/rbr_prod/wp-content/themes/vantage-child/

2. In that new vantage-child directory create a style.css file and put this in that file.
```
/*
 Theme Name:   Vantage Child
 Description:  Vantage Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     vantage
 Version:      1.0.0
*/

@import url("../vantage/style.css");

@media (max-width: 600px) {
	.logo {
	margin: auto;
	/*
	It will make your logo in the center of screen
	and so will look better while your logo should have
	a background color set too so that no white space
	as well.
	*/
	}
}
```
Yep, I copied the CSS from Web Guru’s answer above. 😉

Then in your WordPress dashboard activate that Vantage Child theme. Going forward you can make your CSS changes there.

This is from the Child Theme codex article that’s often linked to.

http://codex.wordpress.org/Child_Themes
Thread Starter chall90909
(@chall90909)

10 years, 1 month ago

Thank you both @web Guru and @jan Dembowski, looks like that works for me perfectly!

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Change logo for mobile visitors’ is closed to new replies.