Keeping Site Title and Tagline below header for all devices

acegdhrt77
(@acegdhrt77)

4 years, 1 month 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 4 years, 1 month ago by acegdhrt77.
- This topic was modified 4 years, 1 month ago by acegdhrt77.
- This topic was modified 4 years, 1 month 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)

4 years, 1 month ago
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 years, 1 month ago by lisa.
Ankush4475
(@ankush4475)

4 years, 1 month ago
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 years, 1 month ago by Yui.
- This reply was modified 4 years, 1 month ago by Yui. Reason: please use CODE button for proper markdown
Thread Starter acegdhrt77
(@acegdhrt77)

4 years, 1 month ago

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?