Mobile Adjustments

  • Author
    Posts
  • #149013

    Hello,

    I have a few requests to adjust items in the mobile view of the site: https://longevityachieved.wpcomstaging.com/

    I’ve read through the forums numerous times and found many of the solutions along the way! Thank you for being so on point!

    Here we go:

    1. How can I remove the menu on the mobile site? You’ll notice on the Front Page, we do not use a Primary Menu.

    2. How can we have the secondary menu show up on the mobile site?

    3. How can I reduce the size of the titles for child pages in parent pages: “How You Win” and “Tools We Use”? (you’ll notice I adding many of the custom CSS you’ve provided for others – I may have caused this.

    4. After adding padding below, left and right on the Feature Page 1 and 2 images, they now appear behind the first child page on the grid view in mobile. How can I ensure the CSS I added applies only to non-mobile screens? (did I do this incorrectly for the desktop views as well? My intention was to create a right alignment and left alignment for the images – which are images of text – on the Front Page)

    5. Is there a way to centre the logo image in the footer of the mobile site and leave it as it is on all other screens?

    Finally, and I believe most importantly, when I visit this site on a mobile device – it shows a text only version of the site name, tagline and home title and tagline. I must click view full site in order to actually see a site that is representative of the Prosperity theme. How can I fix that?

    Any help you can provide is greatly appreciated!

    The blog I need help with is longevityachieved.wpcomstaging.com.

    #149022

    tarasdashkevych
    Theme Author

    Hello,
    Thank you for using the Prosperity. I love your a color palette you’ve chosen for your site!

    “How can I remove the menu on the mobile site? You’ll notice on the Front Page, we do not use a Primary Menu.”
    – Please use this custom CSS to remove the mobile menu button:

    
    .mobile-buttons {
      display: none;
    }
    

    “How can we have the secondary menu show up on the mobile site?”
    – Please use this custom CSS to display your secondary menu in the header section in smaller screens:

    
    @media (max-width: 992px) {
    	.secondary-navigation {
    		display: block;
    		width: 100%;
    		max-width: 100%;
    	}
    
    	.secondary-navigation > div > ul > li {
    		margin-left: 0;
    		padding-left: 0;
    		border-left: none;
    		margin-top: 15px;
    	}
    }
    

    “How can I reduce the size of the titles for child pages in parent pages: “How You Win” and “Tools We Use”?”
    – To change the title size in child page on the Front Page template, please use this custom CSS:

    
    #page .featured-page .th-grid-row .entry-title {
      font-size: 16px;
    }
    

    “After adding padding below, left and right on the Feature Page 1 and 2 images, they now appear behind the first child page on the grid view in mobile…”
    – You can use CSS media queries to apply your custom CSS for a specific screen size (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp). For example, please use this custom CSS instead of the one you’ve added:

    
    @media screen and (min-width: 992px) {
    	.front-block.featured-page-674 .front-block-header {
    		padding-left: 200px;
    	}
    	.front-block.featured-page .front-block-header {
    		margin-bottom: -65px;
    	}
    }
    

    “Is there a way to centre the logo image in the footer of the mobile site and leave it as it is on all other screens?”
    – Sure! Please add this custom CSS:

    
    @media (max-width: 992px) {
      .footer-widgets .widget:nth-child(1) img {
        margin: 0 auto;
      }
    }
    

    It will center the image in your first footer widget in screens that are 992px or smaller.

    “Finally, and I believe most importantly, when I visit this site on a mobile device – it shows a text only version of the site name, tagline and home title and tagline…”
    – It looks like the Mobile Theme is currently active on your site. Please disable it in order to display the theme design.

    Please see this documentation page: https://en.support.wordpress.com/themes/mobile-themes/#enabling-or-disabling-the-mobile-theme

    Hope this helps. Please let me know if you have any additional questions.

    Thank you,
    Taras

    #149024

    Wow! This is absolutely phenomenal! Thank you for the kudos and for all of your support.

    2 new items have come up and 1 old:

    1. The code below did not produce the intended result to centre the footer logo

    @media (max-width: 992px) {
      .footer-widgets .widget:nth-child(1) img {
        margin: 0 auto;
      }
    }

    2. Is the a way to now centre the logo at the top or better yet – have the secondary menu display beside it instead? Either will produce the desired result. This is for the mobile version.

    3. Is there a way to centre the titles for the grid on the Featured Page 1 and 2 and move them closer to the image? This is for all screens.

    Thank you again for your super quick reply – most everything worked flawlessly!

    #149025

    I take back item number 1! That is resolved!

    #149049

    tarasdashkevych
    Theme Author

    “Is the a way to now centre the logo at the top or better yet – have the secondary menu display beside it instead? Either will produce the desired result. This is for the mobile version.”
    – Due to a limited space in mobile devices, displaying the secondary menu next to the logo will cause styling issues.

    You can use this custom CSS to center the logo:

    
    @media (max-width: 992px) {
      .site-header .site-branding {
        max-width: 100%;
        text-align: center;
      }
    }
    

    ” Is there a way to centre the titles for the grid on the Featured Page 1 and 2 and move them closer to the image? This is for all screens.”
    – Sure. Please use this custom CSS:

    
    .featured-page .th-grid-row .entry-title {
      text-align: center;
      margin-top: 0;
    }
    

    Let me know if you have any additional questions.

    Thank you,
    Taras

    #149051

    Perfect! Thank you!

    #149054

    Hi Taras!

    The code below did not center the logo on the mobile site – did I miss something?

    @media (max-width: 992px) {
      .site-header .site-branding {
        max-width: 100%;
        text-align: center;
      }
    }
    #149058

    tarasdashkevych
    Theme Author

    The reason why it does not work for the logo in mobile views is because of this custom CSS added to your site:

    
    @media only screen and (max-width: 500px) {
     #page #masthead .site-branding {
        float: left;
        width: 50%;
        text-align: left;
     }
    }
    

    Please remove it in order to center your logo in mobile views.

    Hope this helps.

    Thank you,
    Taras

    #149064

    Worked perfectly! Thank you!

    #149074

    tarasdashkevych
    Theme Author

    You are very welcome!

The topic ‘Mobile Adjustments’ is closed to new replies.