mames Posted July 27, 2023 Share Posted July 27, 2023 I'm realizing that designing for both mobile and desktop on each page is becoming too complicated (for my case, on this specific site with thousands of images). I'm currently doing the trick where you use "@media screen and (max-width: 750px)" and "@media screen and (min-width: 750px)" to hide sections. I have thousands of images however and each pages' Page Settings Advanced code section is becoming a mess. It's coming back in to test and edit code is taking way too long to sift through. I'm thinking that I would now like for users visit my splash page (which only has one link to take them into the site) and if they are on mobile they can only see a link (using the code above) that sends them to my site main pages that is specifically designed for mobile and if they are on desktop, they can only see a link that takes them to my site that is designed for desktop. For pages with my site footer (that has links), if the user is on mobile they will only see text blocks that send them to mobile pages and vice verse. The big problem is the site HEADER navigation links though! Right now, if I technically make two pages (mobile and desktop) for each page of my site and drag them into the Main Navigation of the site, all of the versions (desktop and mobile) of the page will show up in both the mobile and desktop menus. What can I do to make it to where only links designed for mobile are seen on the mobile header menu and only links designed for desktop are seen in the desktop header? Thanks! www.mamiecreative.com Link to comment
Solution tuanphan Posted July 28, 2023 Solution Share Posted July 28, 2023 Have you solved or still need help? mames 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
mames Posted August 14, 2023 Author Share Posted August 14, 2023 Thank you so much, Taun! I decided to use another solution you posted on here where instead of having sections for mobile and desktop on one page, I broke them up and put them designated pages and used this code you posted to redirect ... <script type="text/javascript"> if (screen.width <= 1000) { document.location = "https://www.mamiecreative.com/fashion-lifestyle-mobile"; } </script> You rock! Don't know what we'd do without you. tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment