How to force desktop mode for a single page

Support
1

Hello,

I am using a custom theme based on Quark and I have set the position of some navigation buttons on the home page of my website by absolute pixel values to create a circle of buttons around a round logo.

It looks nice on desktop but is totally messed up on a mobile device. But when I tell my mobile browser to show the desktop version of the page, it is shown correctly.

That’s why I am searching for a way to prevent mobile devices to use the mobile version of te website on that one home page wile still using the mobile version on all other pages.
I thought there could be some frontmatter value for that purpose? But I didn’t find something.
Is it possible to force desktop mode for one single page?

Thanks in advance for any help.

Lucas

2
3

Hello and thanks for that hint.
But to be honest, I do not know how to use this within a grav page. Should I just write the html code inside the (markdown) page?

4

Probably would require extending base template and adding some check based on a custom page header

5

do you know css ?
if so
mobile version is just a css rule
like " if width of page is less than this do this"
so if you just add a new rule like that after “existing” one, that would just work.
you can use browser to find what to add

  1. go to the page you want to change
  2. open inspect at browser
  3. select navigation
  4. search for width rule of it like “@media (max-width: 640px)”
  5. play with it
    .
    .
    .
    lastly) good night, sleep well, cya ^^.
6

Thanks!
That sounds promising.
I am not sure where exactly to add that rule in the particular page. But I will try around (as soon as I find the time - I hope tonorrow in the evening).

7

at Pages there is your home page you can edit.
you can add something like this there

<style>
bacground: purple //rule for only this page
</style>

that would work if you and your theme put css files to top, i guess
.

8

I just tried a little:

First it seems not possible to just add tags to the content of the page - they seem to be ignore as far as I can tell…

Second: The whole source code of the page does not contain any “@media” statements.
There’s only this:

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

That’s the only thing I could perhaps associate with the way the page is shown. But: It is loacted in the meta part - so before the body tag is opened. That’s why I think it is difficult to influence this on a per page basis…

What do you think?

Update pamtbaau: Added backticks surrounding the <meta> element

9

Only what?

How much are you familiar with HTML and CSS? Based on your posts, seems like not very :thinking:

10

Sorry - unfortunately the code was interpreted and thus not shown - I edited the last post using a code block now so that you can see what I meant (meta viewport tag).

I am quite familiar with HTML and I am getting familiar with css in the last weeks as I am using Grav now as well as Marp.

What I am not familiar with is Grav’s details as well as responsive websites…

11

Did you try replacing this to what is suggested in the link I shared?

<meta name="viewport" content="width=1024">

Does it work as you expect it to?

12

i didnt say source code, i said inspect. there you can see and try css codes that effects html elements. you may search about this topic on web and try it after reading and watching some videos again :slight_smile:

13

@Lucas.Sichardt,

I don’t know your website, nor your use-case and user base, so my reply might miss the point for you.

I am quite familiar with HTML and I am getting familiar with css in the last weeks

The approach you are taking smells like the proverb: “If all you know (have got) is a hammer, all problems look like a nail”.

  • Considering that across Europe, mobile visitors outnumber desktop users, you might consider taking mobile first in mind when designing a webpage.
  • I would suggest to study MDN: Responsive Design to learn how to design a website that fits both mobile and desktop users.
    You will learn among other things about Media Queries and relative units that allow you to use css rules for specific screen sizes.

If your use-case really requires to show a “desktop” version of a single page, you could try the following in your Quark based custom theme (not sure if it works in your use-case):

  • Copy file /user/themes/quark/templates/default.html.twig into /user/themes/mytheme/templates/home.html.twig .

  • Add to the template:

    {% block head %}
    {{ parent() }}
    <meta name="viewport" content="width=device-width, initial-scale=0.1">
{% endblock %}

  • Rename /user/pages/01.home/default.md into /user/pages/01.home/home.md

You may need to try some other <meta> suggestions provided in the link referred to by @Karmalakas

14

Hello and thanks a lot!

This was the main point. By using another template (here “home”) instead of the default one which is used for the other pages it was possible to control that single “home” page.

Now I was playing with the viewport options and the initial-scale and I have what I need.

Thanks a lot for this!

15

In my case this meta tag was right (experimenting with the initial-scale factor is essential):

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