Support » Fixing WordPress » Keeping Site Title and Tagline below header for all devices

  • Trying to simply move Site Title and Tagline below header for all devices I used this CSS code below:

    .site-branding-text{
    position:relative;
    padding-top:500px;
    padding-bottom:10px;

    I was able to move the Site Title and Tagline but its not in the same spot when looking in different mobile devices, on Android Galaxy its perfect but for Iphone its not. I also made the header full height for mobile devices.

    Any help will be greatly appreciated.

    • This topic was modified 4 months, 2 weeks ago by acegdhrt77.
    • This topic was modified 4 months, 2 weeks ago by acegdhrt77.
    • This topic was modified 4 months, 2 weeks ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • lisa

    (@contentiskey)

    create a topic in (parent) theme specific support forum to get accurate guidance to adjust the display of the header/site title/tagline on various device types/sizes.
    https://wordpress.org/support/theme/twentyseventeen/

    • This reply was modified 4 months, 2 weeks ago by lisa.

    Try This Code . without position relative

    
    .site-branding-text {
        padding-top: 500px;
        padding-bottom: 10px;
    
    }
    

    or if above not works then use

    
    .site-branding-text {
    	/* position: relative; */
    	padding-top: 500px;
    	padding-bottom: 10px;
    	/* border: 1px solid; */
    	margin: 0 auto;
    	display: table !important;
    	float: none !important;
    }
    

    Thank You And let me know if this works or not

    • This reply was modified 4 months, 2 weeks ago by Yui.
    • This reply was modified 4 months, 2 weeks ago by Yui. Reason: please use CODE button for proper markdown

    Hi Ankush4475

    Unfortunately it didn’t seem to work this is the code Im putting on the Custom CSS

    @media only screen and (max-width: 768px) {
    .site-branding-text {
    /* position: relative; */
    padding-top: 500px;
    padding-bottom: 10px;
    /* border: 1px solid; */
    margin: 0 auto;
    display: table !important;
    float: none !important;
    }
    .custom-header {display: none;}

    body:not(.twentyseventeen-front-page) .entry-header {
    padding-top:50px;
    }

    .has-header-image.twentyseventeen-front-page .custom-header{
    height:100vh;
    position:relative;
    }
    }

    am I doing something thats not making it consistent throughout other mobile devices?

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.