Mobile display (logo, picture, title) not displaying correctly

jaxfreeblog · Member · May 12, 2017 at 1:58 pm
Copy link

Add topic to favorites
Hello WordPress HTML Genius!

I recently switched themes and am happy with the desktop display as far as the logo, display, and title. Unfortunately, the mobile display is jumbled (smartphone). Ideally, I’d like to have the logo pushed up, picture of bridge underneath, then the title under that.

Could you help me with this? Thanks!

Aaron

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · May 13, 2017 at 1:22 am
Copy link
Hi, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS and see what you think. In my testing it seems to work well on tablets and phones, but make sure and test just to verify.
```
@media screen and (max-width: 767px) {
  .site-branding {
    padding-top: 0 !important;
    position: relative;
    padding-bottom: 70px !important;
  }
  .site-description {
    position: relative;
    bottom: -80px !important;
  }
  .site-logo {
    margin-top: 0;
  }
}
```
jaxfreeblog · Member · May 13, 2017 at 3:11 am
Copy link
Ok, it looks good! I’m wondering if the bridge could be shrunk down so that the entire bridge in showing in the mobile form. Also, could the logo be placed at the upper left of the screen?

Thank you again for all of your help!
thesacredpath · Member · May 13, 2017 at 7:22 pm
Copy link
Because of the proportions of the image, if we make it fully visible on mobile, it is not as tall as your logo. You can try this, which on screens/windows 600px and narrower, it will make more of the image show and the tagline will be below the image. See what you think and let me know.
```
@media screen and (max-width: 600px) {
	.site-branding {
		background-size: auto 80%;
		background-repeat: no-repeat;
		background-position-y: top;
	}
}
```
jaxfreeblog · Member · May 15, 2017 at 2:23 am
Copy link
I will keep it with your original suggestion. Thanks!
thesacredpath · Member · May 15, 2017 at 6:35 pm
Copy link
You are welcome.

No items found.