Hi, I'm new here and quite new to web design too. This is my first question so I'll post the basic problem I need some advice with and explain things generally before I start posting loads of code.

 

I'm building a website using Wordpress, and using the template Egofolio and need to make some small modifications to this. I've got the page looking half decent when viewed on my MacBook, but not when viewed on a mobile device. I've built a few basic websites before but nothing responsive. I have looked into the basics and understand what I need to do but not how to do it.

 

On to the problem...

 

Website preview: http://www.electrobankmedia.co.uk/?theme=Egofolio&passkey=552866725253e6e89327c

 

As you will see, the header section doesn't look too bad on a decent sized screen. But on a mobile device it looks awful in both landscape and portrait views. I've added the social icons from the footer (as the client wants them in the header) and this has interfered with the layout.

 

I understand there's not really enough space for the social icons in the header on a mobile device because the front page slider needs to be fully visible, so I want to create some code that will hide the icons when the site is viewed on a mobile device. I'm guessing I could hide the class "social-icons" but I'm assuming that would hide the icons in the footer too and I don't want to do that. Is there a simple method to do this? I have looked into this and found advice and bits of code online and tried a few things unsuccessfully, but don't understand the exact correct method, where to put the code, etc.

 

If anyone could offer some advice that would be amazing. I'll happily post any code from the header.php, footer.php, layout.css files, or any other bits of code if it helps.

 

Thanks in advance!

 

marktea

 

PS. If you're previewing the site, the link will take you to the blog page. Click on "about", wait for the ajaxed page to load then click back on "home" to see the slideshow. I'm working on the new template using Theme Switch on the back of a live site, so the pages are currently set up for the live site (if I change the home page settings to display the new template correctly it affects both templates).

Edited October 27, 201312 yr by marktea

Hi Marktea,

 

I have no issues with the header in the various stages of it being responsive, you could keep the social buttons in the top if you wanted, but here are my suggested changes I think you should apply to your mobile media query:

- Center the phone number

- Move the menu button to the center, add a background color + some padding to the text. I would personally add an :after pesudo element (maybe a drop down arrow) to indicate to the user that the menu is infact a drop down.

- If you do wish to get rid of the social buttons in the header but not the footer simply add the following to your media query.

.top-menu #social {
    display: none;
}

(as a side note, your footer social icons are housed in a duplicate id "social" of the header, change this to a class to ensure everything is valid .

 

I would recommend you get rid of the slider on mobile devices, it simply takes too much real estate up on the page. The news posts on the home page work well (maybe cetner the titles, add some spacing around the edges).

 

Of course all of this is just opinion, feel free to ask if you need anything else,

Allan

 

 

 

 

 

Hi Marktea,

 

I have no issues with the header in the various stages of it being responsive, you could keep the social buttons in the top if you wanted, but here are my suggested changes I think you should apply to your mobile media query:

- Center the phone number

- Move the menu button to the center, add a background color + some padding to the text. I would personally add an :after pesudo element (maybe a drop down arrow) to indicate to the user that the menu is infact a drop down.

- If you do wish to get rid of the social buttons in the header but not the footer simply add the following to your media query.

.top-menu #social {
    display: none;
}

(as a side note, your footer social icons are housed in a duplicate id "social" of the header, change this to a class to ensure everything is valid .

 

I would recommend you get rid of the slider on mobile devices, it simply takes too much real estate up on the page. The news posts on the home page work well (maybe cetner the titles, add some spacing around the edges).

 

Of course all of this is just opinion, feel free to ask if you need anything else,

Allan

 

Thanks for the reply Alan, a few good ideas there. Good point about the social id, I'll change this to class. I think I should also change the content-info div that contains the social div too, as this is duplicated in both the header and footer?

 

I think what I need to do is change all the #content-info to .content-info, and #social to .social...

 

then in header.php change div id="content-info" to div class and ul id="social" to ul class...

 

but... in the footer, <footer id="content-info" role="contentinfo">. Would the correct method for here be to use <footer class=""> ? I've not used the new style footer tag before and slightly confused about the correct syntax, or if I'm doing all of this the right/easiest way or not?

 

The reason I'm not keen on the social icons if that they seem to distract the eye from the slider when viewed on my iphone 4s (client definitely wants the slider ). Also there are space issues when viewing in landscape mode and the last icon is pushed down onto the next line.

 

So... in the media queries I added the code as follows (the top line was already there of course):

 

@media screen and (min-width: 480px) {

.top-menu #social {

display: none;

}

Not sure what I've done wrong but this hasn't changed anything?

Also, the phone number isn't in its proper place yet, I'm still working out its placement

 

Hope that all makes some sense at least, and thanks for any help

Actually going to correct myself slightly Allan, your code did work... but where I placed the code only hides the social icons when the phone is in landscape view. What would I need to add to Media Queries to also hide them in portrait view?

 

Thanks!

Edited October 28, 201312 yr by marktea

Don't worry about answering this one now, got it all sorted as much as it needs to be