- This topic has 8 replies, 2 voices, and was last updated 4 years, 4 months ago by David.
-
AuthorPosts
-
November 7, 2019 at 8:37 pm #1056518Katharina
Hi Support team,
I finished so far my website and would like to customize it to mobile viewing. There are a lot of adjustments to do. How do I go ahead?Here are few things that I noticed.
– Can I not show the top bar on mobile devices?
– Not show my success bar since it doesn’t look great on mobile.
– The section “HOW IT WORKS” doesn’t look good at all on mobile, how could I improve it? https://paste.pics/76XEW
– For the Opt-in in my footer can I disable the image in mobile? And the background is not showing, how can activate it on mobile as well?
– The Footer bar has the same problem as the Opt-in, The background is not showing.I think this is enough for now to work through.
Thanks
KatiNovember 8, 2019 at 4:41 am #1056776DavidStaffCustomer SupportHi there,
1. Remove top bar on mobile – this CSS:
@media (max-width: 768px) { .top-bar, img.rotate-optin { display: none; } }
2. You can use the GP hide-on-* classes to hide elements:
https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classesFor example the:
<div class="custom-success-container">
becomes :
<div class="custom-success-container hide-on-mobile">
3. How it works – you have inline styles in your HTML eg.
<p class="sub-title" style="text-align: left; padding-left: 275px;">
The problem with this method is its always 275px pushed to the left so its never gonna stay aligned left with the heading. Would it not be better to remove the padding and text-align: center; ?
4. Use a hide-on-* class in the img eg.
<img class="rotate-optin alignleft wp-image-329 hide-on-mobile" .........
5. Remove optin image – i included that in the CSS in point 1.
5. and 6. Some of your styles are inside an @media query for desktop so they need to be moved outside of the @media query for example the optin background:
@media (min-width: 768px) { .custom-optin-footer { background-color: rgba(229, 212, 206, 0.67); } /* more CSS below */
You need to move that property outside of the media query, preferably above it so your code would look like:
.custom-optin-footer { background-color: rgba(229, 212, 206, 0.67); } @media (min-width: 768px) { /* more CSS below */
Find the footer background styles and also move that out of the media query.
November 8, 2019 at 8:09 pm #1057499KatharinaThanks David, I’ll give it a try today
November 9, 2019 at 5:44 am #1057645DavidStaffCustomer SupportYou’re welcome
November 10, 2019 at 1:08 am #1058302KatharinaCan I make some additional changes
1. Top bar
Can I have a shorter text for the top bar instead hiding it?3. The section HOW IT WORKS is centered but is there a way to line the symbols up?
5. The background is displayed in mobile as well but the angled section makes it bit messy. I couldn’t figure out how to disable only the angled section 1
Thanks
November 10, 2019 at 1:15 am #1058307KatharinaFor some reason the logo bar doesn’t work properly in mobile or tablet. All logos are on the left and not equally centered
I also noticed that since I made the changes I have on few pages the featured Image twice.
https://test.katisiemens.com/de/leistungen/
https://test.katisiemens.com/de/erfahrungsberichte/
https://test.katisiemens.com/de/nahrungsergaenzung/Is it possible to disable side bar on tablet and mobile?
November 10, 2019 at 4:21 am #1058402DavidStaffCustomer Support1. Remove the CSS provided to hide. Then change the top bar widget to a HTML widget and you can add different text for different devices using the hide-on-* classes:
e.g
<p class="hide-on-mobile">I am longer text and display on tablet and mobile</p> <p class="hide-on-tablet hide-on-desktop">Short text for mobile</p>
3. Really tricky to do that without completely changing ht HTML involved
5. Find this CSS and place it inside a @media query so this:
.angled-section1:before { top: 0; transform: skewY(-1deg); } .angled-section1:before, .angled-section1:after { background-color: #ffffff; content: ''; display: block; height: 20%; position: absolute; left: 0; right: 0; z-index: -1; transform-origin: 0%; }
becomes:
@media (min-width: 769px) { .angled-section1:before { top: 0; transform: skewY(-1deg); } .angled-section1:before, .angled-section1:after { background-color: #ffffff; content: ''; display: block; height: 20%; position: absolute; left: 0; right: 0; z-index: -1; transform-origin: 0%; } }
7. Featured images, you need to edit the Header Elements you have created and check Disable Featured Image
8. This CSS:
@media (max-width: 768px) { #right-sidebar, #left-sidebar { display: none; } }
November 12, 2019 at 3:53 am #1060272KatharinaThanks David,
It’s looking already so much better. But there are still few things to improve.Why is the menu like that:
https://paste.pics/7881C
When I change the browser width it’s somewhere between tablet and mobile. The menu is not switching to mobile right away. there is a area where it isn’t a mobile menu, nor a desktop menu.And how can I fix the logo bar in mobile.
https://paste.pics/78846Thanks
KatiNovember 12, 2019 at 6:10 am #1060378DavidStaffCustomer SupportCouple of choices, both are in Customizer > Layout > Navigation
1. Increase the Mobile Menu Breakpoint so it kicks in earlier.
2. Reduce the Menu Item spacing so the navigation occupies less width.Logo bar try this CSS:
.custom-container .flex-grid { display: flex; justify-content: space-between; align-items: center; }
-
AuthorPosts
- You must be logged in to reply to this topic.