Keeping Site Title and Tagline below header for all devices

  • acegdhrt77

    (@acegdhrt77)


    5 years ago

    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 5 years ago by acegdhrt77.
    • This topic was modified 5 years ago by acegdhrt77.
    • This topic was modified 5 years 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://www.ads-software.com/support/theme/twentyseventeen/

    • This reply was modified 5 years ago by lisa.
    Ankush4475

    (@ankush4475)

    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 5 years ago by Yui.
    • This reply was modified 5 years ago by Yui. Reason: please use CODE button for proper markdown
    Thread Starter acegdhrt77

    (@acegdhrt77)

    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)
  • The topic ‘Keeping Site Title and Tagline below header for all devices’ is closed to new replies.