Shrink site for display on mobile devices – Themeco Community

Shrink site for display on mobile devices

jmuskus — Fri, 12 Sep 2014 09:59:26 +0000

Hi,
Is there a way to set my site up so that when viewed on tablets, mobiles etc, the whole page just shrinks down to fit the device and then has to be zoomed in on? I realise the theme is responsive but I feel like for me it would be much easier to just have it shrink down rather then trying to make all the elements responsive as at the moment some of them are and some of them aren’t.

Thanks!

Reply To: Shrink site for display on mobile devices

jmuskus — Fri, 12 Sep 2014 10:00:06 +0000

This reply has been marked as private.

Reply To: Shrink site for display on mobile devices

Christopher — Fri, 12 Sep 2014 10:55:07 +0000

Hi there,

Since the theme is responsive the elements resize as the screen gets bigger or smaller.
In this case we can help you to have responsive website. If there are elements that need to be responsive and they are not , You can ask us and we will help you out.

Thank you.

Reply To: Shrink site for display on mobile devices

jmuskus — Sat, 13 Sep 2014 23:19:49 +0000

I really appreciate that but I feel like in my situation it would be better if it wasn’t responsive as there are some elements that just don’t work too well when responsive like my tables. As the page is quite small I would prefer that any users on their phone or tablet just sees the entire page rather than a zoomed in responsive view of it….

Reply To: Shrink site for display on mobile devices

Rad — Sun, 14 Sep 2014 00:11:15 +0000

Hi there,

The requirement is only possible with custom development in which we can’t provide.

The idea is installing mobile detection plugin, and customize VIEWS/GLOBAL/_HEADER.PHP to dynamically generate skip this meta for tablet.

Responsive design detects device’s screen width and not what devices. So you might need custom development.

Thanks!

Reply To: Shrink site for display on mobile devices

jmuskus — Thu, 18 Sep 2014 11:53:17 +0000

Ok so I am almost there with getting my site how I want it however there a few elements that are not looking too good on mobile screens.

1. The text in the topbar does not scale down properly and a black box appears around it.
2. The image under the nav bar scales down too much and the text that is meant to be on top of it does not scale down and appears further down the page.

Are these easy fixes or have they happened because I have put the site together in a messy way? Have just been learning as I go along really! I have also noticed that some elements look very slightly different depending on the browser. I have been working on it in Firefox so it looks exactly as I want it on there!

Reply To: Shrink site for display on mobile devices

Paul R — Thu, 18 Sep 2014 12:52:50 +0000

Hi,

Can you try the code below.

You can add this under Custom > CSS in the Customizer.


@media (max-width: 590px){

.x-topbar p,
.x-topbar a {
  font-size: 1.5rem;
}

.x-topbar a {
  display:block;
  outline:none;
}
}

@media (min-width: 768px){
   .x-container-fluid.width {
      width: 100%;
   }
}

Regarding the image under the nav bar. I would suggest you incorporate the text into the image.
That way it will scale together with it’s background.

Hope that helps.

Reply To: Shrink site for display on mobile devices

jmuskus — Thu, 18 Sep 2014 13:41:51 +0000

That doesn’t seem to have affected anything I’m afraid…

Reply To: Shrink site for display on mobile devices

Zeshan — Thu, 18 Sep 2014 16:12:30 +0000

Hi there,

Thank you for writing in!

Your Customizer CSS code is missing a curly bracket that’s why the above provided CSS styling isn’t working. Would you mind adding the above provided CSS code at the top of instead adding at the bottom under Custom > CSS in the Customizer?

It should be working then 🙂

Thanks!

Reply To: Shrink site for display on mobile devices

jmuskus — Thu, 18 Sep 2014 16:49:04 +0000

Hi, that has reduced the size of the text but there is still a black box that appears around it and the text has all gone out of line so doesn’t look very smart. Also the images become even smaller than they need to be with a lot of space around it… Thanks!