Comments (12)
I did some quick research and it seems like device-width
have been deprecated.
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out.
With that said, all max-device-width
should be replaced with max-width
.
I can create a PR for this if you're OK with the proposed change.
from hugo-coder.
Yes, we have and mobile menu. It should display in 768px or less screens.
from hugo-coder.
Hmmm, I must be missing something ... it looks like this for me.
from hugo-coder.
@jemostrom how did you test this? I mean is this a local clone of this theme? Are you sure you have the updated theme in your site?
For the sake of comparison you can take a look at https://deploy-preview-90--hugo-coder.netlify.com/ which is based of almost the latest of the master
HEAD.
from hugo-coder.
Yep, I downloaded a zip yesterday (I'm just playing around at the moment) and use it locally. But I see the same thing on the preview site. Here are screenshots from Safari and Firefox
from hugo-coder.
We use max-width
in the CSS rule for responsiveness.
@media only screen and (max-device-width : 768px)
Looks like you are resizing our browser window, and this will not trigger the mobile menu because your max-screen-width
is still bigger than 768px
.
You can test the mobile menu using the Developers Tools from your browser.
from hugo-coder.
I'm probably too stupid to do things correctly (I'm not doing any web design so ...) but on Safari I enter the responsive mode and select one of the available iPhones ... and it looks like this
Am I doing something wrong here. Also, if I make my window narrow on my laptop shouldn't I also get the responsive menu? My thinking is that I might have several windows open and have made windows narrow so they can be viewed at the same time.
from hugo-coder.
Firefox seem to do it correctly. I also checked the example site using my 6s Plus and it looks OK there also. So apparently it's Safari on my laptop that is doing something wrong.
But I'm still curious why the decision not show a "hamburger menu" on my laptop for narrow windows.
from hugo-coder.
FWIW - I did change max-device-width
to max-width
and it displays as I first expected. But I don't know if I'm doing things correctly. Is there some description somewhere how I should work to make changes to CSS/SCSS (I have no previous experience of SCSS)?
from hugo-coder.
Wierd. Can you give me the version of your Safari? Maybe we need to add an extra rule or something to make it work on Safari. Need some research.
Is there some description somewhere how I should work to make changes to CSS/SCSS (I have no previous experience of SCSS)?
Not yet. I need to write something. But you will need to use Hugo Extended v0.43 or more to compile the SCSS into CSS. The command make release
will to this job for you. And, about changing the SCSS, it is very straightforward I think.
from hugo-coder.
Yes, it's basically how to build the css files I need help with, the scss files looks almost like normal css files so I think handle that part.
Safari: Version 12.0 (14606.1.36.1.9)
from hugo-coder.
@josephting sure. I would appreciate it.
from hugo-coder.
Related Issues (20)
- Can keep scrolling to the left on mobile, when direction is 'rtl' HOT 1
- Missing Trailing slash in HomePage link when lang != default HOT 1
- replacement for forkawsome HOT 1
- Can't evaluate field twitter in type []interface {} HOT 2
- Working with Plausible Analytics HOT 1
- cannot build or serve blog following quickstart instructions HOT 1
- Disable external link CSS HOT 1
- How to remove this "menu-separator" element? HOT 1
- Remove prefetch-src from layouts/partials/csp.html. HOT 1
- Refactor Mastodon Comments HOT 2
- Add direct link to demosite on themes.gohugo.io HOT 2
- Does the theme support switching between English and Chinese? HOT 1
- Ordered Lists are not displayed correctly
- Add Cusdis to available comment services HOT 3
- No favicon loaded if no favicon.svg exists
- Utterances Requires inline-script CSP Access HOT 1
- Custom subscribe button on landing page
- building failure about `mastodon.html` HOT 1
- How can I stop my tags from being auto capitalized? HOT 7
- New to Hugo, adding new content to existing theme HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-coder.