[jmuskusParticipant]

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!

[jmuskusParticipant]

This reply has been marked as private.

[ChristopherModerator]

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.

[jmuskusParticipant]

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….

[RadModerator]

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.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Thanks!

[jmuskusParticipant]

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!

[Paul RModerator]

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.

[jmuskusParticipant]

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

[ZeshanMember]

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!

[jmuskusParticipant]

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!

[ZeshanMember]

Hi there,

Thank you for writing in!

To remove the black box around the text, you can add the following CSS code:

.x-topbar .p-info {background-color: transparent !important;}

Regarding the images, I’m not able to see the difference, would you mind pointing us where you are experiencing the change?

Cheers!

[jmuskusParticipant]

I would show you some screen shots but I’m not sure how to attach images on here?! When viewed on Firefox on my PC the images under the nav bar on each page have no border, they are flush with the edge of the boxed page and the nav bar. When viewed on my mobile they become even smaller than they need to be with space on all sides between the image and the rest of the site. There is a particularly large gap between the bottom of the image and the start of the text on the page. Thanks!

[Paul RModerator]

Hi,

You can use this http://prntscr.com/

Then just share the link here.

Thanks

[jmuskusParticipant]

Great tool, thanks! These screenshots will show you how the image differs when viewed on a smaller device:
http://prntscr.com/4o8cgd
http://prntscr.com/4o8d5h

[Paul RModerator]

Hi,

Thanks for the screenshots.

Can you try adding the code below.

@media (max-width: 387px){
   .x-topbar p, .x-topbar a {
	font-size: 1rem;
   }

.x-content-band {
    margin: 0;
    padding: 0;
}
}

Thanks

[Author]

Posts