Mobile Version

wbmedia94 · Member · Sep 1, 2016 at 3:56 pm
Copy link

Add topic to favorites
I am really happy with the theme, “Pique” for my site – http://www.wbmedia.co.uk however I am very disappointed with the mobile version. The logo on the mobile version seems squashed/stretched and the header text just says “Story” instead of “Whats your Story?”

Please note these two problems are only on the mobile version, the desktop version are absolutely fine. I have posted this on a few forums already and I am still not having much luck!

The blog I need help with is: (visible only to logged in users)
siobhyb · Member · Sep 1, 2016 at 5:26 pm
Copy link
Hi Will,

I visited your site on my mobile and the logo seems to take up full width of the screen while the “Whats your Story?” text disappears completely. Have you made any changes to your site’s set up since sending in your support request? If not, can you let me know what device you’re viewing your site on?
wbmedia94 · Member · Sep 1, 2016 at 5:34 pm
Copy link
I’ve not made any changes to my sites set up since sending in my request.

I’m viewing it on an IPhone.

It’s mainly the logo that’s my concern because it looks squashed!

Cheers Will
siobhyb · Member · Sep 2, 2016 at 11:40 am
Copy link
Hi Will,

There’s a set height on your logo, which may be causing the issue. Could you try adding the following custom CSS to the CSS panel of your site’s Customizer?
```
.site-branding .site-logo-link img {
    height: auto;
}
```
I also spotted the following in your custom CSS:
```
div#toptext {
    margin-top: -30px;
    color: #275598;
    text-shadow: 1px 1px 2px rgba(0,0,0,0);
    font-size: 40px;
}
```
The negative value for margin-top in the above snippet is pushing the Whats your Story? text further up the page than it should be. Try giving it a positive value to push the text down the page and to make sure it’s visible across all devices.
wbmedia94 · Member · Sep 3, 2016 at 9:46 am
Copy link
This has done the job thank you so much it looks perfect!
wbmedia94 · Member · Sep 3, 2016 at 9:49 am
Copy link
Sorry to be a pain but would there be any chance I could make the logo smaller and move to the left and have the navigation alongside to the right? Without it effecting the mobile version.

Basically the same as this site:
http://filmam.tv
siobhyb · Member · Sep 5, 2016 at 11:40 am
Copy link
Hi Will,

You could reduce the width of the logo and navigation then float them alongside each other with the following snippet:
```
@media (min-width: 767px) {
    .site-branding {
        float: left;
        width: 40%;
        padding-left: 30px;
    }

    #site-navigation-wrapper {
        float: left;
        width: 60%;
    }
}
```
The above will work for devices that are 767px in width or larger. You can also experiment with different widths, if you’d like.

Let me know if that works out! If you have extra CSS requests, then please post a new request to our dedicated forum here:

https://en.forums.wordpress.com/forum/css-customization

Thanks!
wbmedia94 · Member · Sep 5, 2016 at 1:39 pm
Copy link
Thank you ever so much for all your help. I really appreciate all your help. However I do feel that the theme I have chosen is giving me limitations into what I want to do.

I wondered if you could reccomend a relevant theme that would represent my business best? I’ll give you a bit of background:

My business is a video production company called, WB Media. However the business is split into two sections, WB Media Corporate and WB Media Weddings. (Two different types of clients.) Therefore on my website I will have three different types of branding ideally:

Homepage – WB Media
Then a WB Media Corporate page and WB Media Wedding page.

Let me know what you thinks best to go forward from here?

Thanks
Will.
siobhyb · Member · Sep 5, 2016 at 3:10 pm
Copy link
Hi Will,

Would you even consider creating separate sites for WB Media Corporate and WB Media Weddings? You would then be able to choose different themes for each different section of your business, which would allow you a bit more room to grow with each brand.

If you’re happy to stick with one site, have you looked at Gateway before? It’s a business theme that makes good use of featured images and also features a video on its home page.

As theme choice is very much down to personal preference, I also recommend filtering our themes in our repository using the Business tag:

https://wordpress.com/themes/filter/business/

Let me know how you get on! I’ll be happy to help with any extra pointers too.
wbmedia94 · Member · Sep 6, 2016 at 12:03 pm
Copy link
Yes I will consider that in the future I think it would be the best outcome. But for now I would like to just have the one website as my business is still in its very early days.

Also I do like the Gateway theme, its certainly a potential.

However my problem now is, if I choose a theme but then I decide I want to go back to the original theme, I would loose all my custom CSS wouldn’t I?

Thanks
Will
meanfxspreads · Member · Sep 6, 2016 at 12:17 pm
Copy link
Hi, I’m having a very similar problem Siobhb – please help! I’m freaking out here – I got like 146 mobile/tablet views from ad words today :O

meanfxspreads.com
I’ve been using the preview feature to get a rough idea of what my site looks like on mobile and tablet and it looks OK (a little wide, though from my experience phones and tabs fit to screen) … I’ve just actually checked on an IPod touch and it looks HORRIBLE. My wide content (table) fits to screen fine, just as I assumed … but the header, menu, copy and footer are all squashed in to a column approximately a third of the screen (IPod up right) – these fundamental elements are not fitting to screen. When turning the IPod horizontal it is not as bad, but still horrible – these elements take up approximately 60% of the width of the screen, while my table fits perfectly. Please help!
siobhyb · Member · Sep 6, 2016 at 5:46 pm
Copy link
@wbmedia94: That’s right, your custom CSS would no longer be applied if you choose to switch themes. However, it would be saved if you ever wish to go back to your original theme.

@meanfxspreads: Please can you start a new thread on this forum? You can do that here:

https://en.forums.wordpress.com/forum/themes#postform

It’s easier for us to keep track of different questions if they’re kept to separate threads and also prevents the original poster from receiving unnecessary email notifications.

I’ve also been unable to replicate the issue you mentioned when visiting your site on my own mobile, so please share a link to the specific pages/posts you’re seeing it on.

Thanks!
wbmedia94 · Member · Sep 6, 2016 at 6:06 pm
Copy link
If I were to change my theme to something else. And then decided to go back to my original one, how would I access my saved theme? Or would it just do it automatically?
siobhyb · Member · Sep 7, 2016 at 11:07 am
Copy link
You can find a link to your CSS revisions under the CSS panel of the WordPress.com Customizer:

https://wbmediacouk.wordpress.com/wp-admin/themes.php?page=editcss

You’re then able to restore previous CSS revisions from the above page.

Hope that helps out!
wbmedia94 · Member · Sep 7, 2016 at 12:44 pm
Copy link
Brilliant, cheers for all your help Siobhyb.
siobhyb · Member · Sep 7, 2016 at 1:41 pm
Copy link
You’re most welcome! :)

No items found.