Responsive mobile/desktop

support
1

hi every body
In my i have this in my list.html

{{ $portfolioScratch := newScratch }}
{{ $portfolioMobileScratch := newScratch }}
{{ partial "slides/columns" (dict  "portfolioScratch" $portfolioScratch "portfolioMobileScratch" $portfolioMobileScratch "ctx" .) }}

{{ partial "header.html" . }}
{{ partial "navbar.html" . }}

<section id="desktop" class="section work">
	{{ partial "helpers/hidden-menu.html" . }}
	{{ partial "slides/slider" (dict "scratch" $portfolioScratch "type" "desktop" "ctx" .) }}
</section>

<section id="mobile" class="section work">
	{{ partial "helpers/hidden-menu.html" . }}
	{{ partial "slides/slider" (dict "scratch" $portfolioMobileScratch "type" "mobile" "ctx" .) }}
</section>

and in my page i talk this

<div class='columns work-width {{ if eq .type "mobile" }} is-mobile is-multiline {{ end }}'>
    {{ if eq (len ($.scratch.Get "posts")) 0 }}
        <div class="column is-half is-offset-one-quarter">
            
        </div>
    {{ else }}
    {{ range $index, $num := (seq ($.scratch.Get "columnsCount")) }}
        <div class="column">
            {{ $column := ($.scratch.Get (printf "%d" $index)) }}
            {{ range $row := $column }}
                {{ if (index $row "post").Params.images }}
                    {{ $scratch := newScratch }}
                    {{ partial "helpers/get" (dict "scratch" $scratch "row" (index $row "post").Params) }}
                    {{ $img := $scratch.Get "img" }}
                    {{ $resizer := "1000x r0" }}
                    {{ with $img.Exif }}
                        {{ if eq .Tags.Orientation 6 }}
                            {{ $resizer = "1000x r270" }}
                        {{ end }}
                        {{ if eq .Tags.Orientation 3 }}
                            {{ $resizer = "1000x r180" }}
                        {{ end }}
                        {{ if eq .Tags.Orientation 8 }}
                            {{ $resizer = "1000x r90" }}
                        {{ end }}
                    {{ end }}
                    {{ $img = $img.Resize $resizer }}
                    <div class="center">
                        <div class='image-box {{ if eq ($.scratch.Get "columnsCount") 1 }} alittle {{ end }}'>
                            {{ $pageLink := (index $row "post").Permalink }}   <a href="{{ $pageLink }}">  
                        <img
                            src="{{ $img.RelPermalink }}"
                            loading="lazy"
                            width="{{ $img.Width }}"
                            height="{{ $img.Height }}"
                            alt='{{ index (split $img.Name ".") 0 | replaceRE "^images/" "" }}'
                            
                            /></a>
                        </div>
                    </div>
                {{ end }}
            {{ end }}
        </div>
    {{ end }}
{{ end }}
</div>

But on my page, the mobile and desktop versions load at the same time. I didn’t develop that myself, and the developer no longer provides support.

Can you help me all ?

Many thanks

2

You need to share your repo so we can see all the code. Without the code we can only guess.

3

In addition to @frjo (share your complete code): From looking at the first batch of code you posted, I guess that you expect different output on mobile and on desktop. But you’re running a static site generator here. It has no idea where the generated HTML will be displayed.

Adjusting for mobile/desktop differences must be done at runtime (or rather view time), i.e. in the browser. You can use either CSS (preferably) or JavaScript for that. For example, you could add CSS to your repository like #mobile {display: none} if the page is displayed on the desktop (and vice versa, of course).

4

hi all
yes i have display :none but in source code i can see mobile code when i use my desktop :frowning:
it is duplicate content ? no ?

you can see code in this template : GitHub - boratanrikulu/eternity: A minimalist Hugo theme designed for portfolio sites.

5

Please: Post a link to your repository if you want help. The theme’s repository (which is un-maintained, btw) doesn’t help as it doesn’t tell us what you are doing.

6

hi i’m sorry

7

I am unable to reproduce this.

8

Hi @jmooring
if you look the source code you can see same probleme :slight_smile:

9

Then I don’t understand the problem.

10

i have two <h1 and two same code :s

11

I have no idea what that means.

When I clone your repo, build your site, and view http://localhost:1313/work/, I see the mobile layout when the screen width is <= 768 px, otherwise I see the desktop layout.

Both sections are rendered in the source, as expected, but only one is visible due to CSS, as expected.

12

it’s not a problem for seo ?

13

I wouldn’t think so, but I’ll let others chime in. If you don’t like it, use a different theme, hopefully one that is actively maintained. This theme is a dead-end.

2 Likes
14

i use it but i have debug all pages for my private project. i juste share initial demo with you. this proleme it’s my last probleme after my private project will be clean. but i think same , it is bas en dead-end template :frowning:

15 
<section id="desktop" class="section work">
	{{ partial "helpers/hidden-menu.html" . }}
	{{ partial "slides/slider" (dict "scratch" $portfolioScratch "type" "desktop" "ctx" .) }}
</section>

<section id="mobile" class="section work">
	{{ partial "helpers/hidden-menu.html" . }}
	{{ partial "slides/slider" (dict "scratch" $portfolioMobileScratch "type" "mobile" "ctx" .) }}
</section>

This part of code looks that is very old, and no SEO care, as have duplicate content.

Maybe you need to remove desktop version, review content, in terms of image resolution and interface, and fix some CSS for Desktop.

Like @jmooring said, looks a dead-end template.

Make sense?

1 Like
16

hi @toledox82
but I can’t modify it without breaking the Hugo code.