Motif theme – Logo sizing

seattlecommercialdevelopment · Member · Jan 12, 2017 at 12:28 am
Copy link

Add topic to favorites
I have positioned my site logo in the desired orientation but I am not able to change the size of the actual image. Maybe Im missing something simple.

Here is my custom CSS so far:
```
.site-logo-link {
	display: inline-block;
	margin-bottom: -45px;
	max-width: 350px;
	max-height: 350px;
	height: auto;
	width: auto;
}

.site-title {
	display: inline-block;
}
.site-description {
	display: inline-block;
		margin-left: 120px;
}
```
Thanks for any help!

The blog I need help with is: (visible only to logged in users)
seattlecommercialdevelopment · Member · Jan 12, 2017 at 12:48 am
Copy link
Actually this only positions my logo correctly on a PC/laptop browser..

Any help on creating a CSS that positions logo relative on all three platforms would be appreciated as well.
thesacredpath · Member · Jan 13, 2017 at 12:33 am
Copy link
Hi @seattlecommercialdevelopment, I’m not seeing a logo on your site right now. If you wish to use a logo, can you add it back into your site and let me know and I’d be happy to help with resizing it for you.
seattlecommercialdevelopment · Member · Jan 13, 2017 at 12:45 am
Copy link
Sorry I had deleted it. Logo is back up.

Still looking for help holding logo to left and in line with Title and description across platforms.

Also sizing logo image with my code only seems to take effect at 100px intervals. i.e. Only have a 100x100px or 200x200px image, not a 250x250px.

Code:

.site-logo-link {
display: inline-block;
max-width: 250px;
max-height: 250px;
height: auto;
width: auto;
}
img.site-logo.attachment-motif-logo {
max-width: 200px;
max-height: 200px;
height: auto;
width: auto;
}

.site-title {
display: inline-block;
margin-left: 20%;
}

.site-description {
display: inline-block;
margin-left: 20%;
}
thesacredpath · Member · Jan 16, 2017 at 8:38 pm
Copy link
Hi and thanks for letting me know. Are you wanting the title and tagline to the right of the logo?
seattlecommercialdevelopment · Member · Jan 16, 2017 at 9:27 pm
Copy link
Yes, please.
thesacredpath · Member · Jan 17, 2017 at 9:09 pm
Copy link
Thanks for the clarification. Remove the existing CSS you have currently and add the following and see what you think. I’ve allowed the design to return to the centered layout with title and tagline below the logo on 679px and narrower screens/windows since the title and tagline doesn’t work well below that with them to the right of the logo. I’ve tested this and all seems good, all the way down to small mobile size, but make sure and check it on tablet and phone just to verify nothing strange is happening.
```
@media screen and (min-width: 680px) {
  #page {
	 margin-top: 0;
  }
  .site-branding {
  	max-height: 250px;
  	padding-top: 0;
  	padding-bottom: 0;
  }
  .site-logo {
  	max-width: 250px;
  	width: 100%;
  	max-height: 250px;
  	height: auto;
  }
  .site-title, .site-description {
  	position: relative;
  	top: -180px;
  	left: 270px;
  	max-width: calc(100% - 250px);
  	width: 100%;
  }
}
@media screen and (max-width: 679px) {
	.site-branding {
		text-align: center;
		padding-top: 0;
	}
	.site-logo {
		margin-left: auto;
		margin-right: auto;
	}
}
```
seattlecommercialdevelopment · Member · Jan 19, 2017 at 5:28 pm
Copy link
Perfect! Just what I was looking for! I appreciate the help.
thesacredpath · Member · Jan 20, 2017 at 3:49 am
Copy link
Hooray and you are welcome!

No items found.