Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi Lely,

Did you look at my last attachment?

The two logos sit central in the footer until mobile device makes them stack.

Let me know if I am not being clear – thanks

[Friech]

Hi There,

Please add this on your custom CSS.

@media (min-width:  532px) {footer .x-brand {margin-right: 30px;}}
footer .univlogo, footer .x-brand {
	display: inline-block;
	float: none;
}

But you need to rewrite the HTML markup on the footer first. You need to have the withUS logo first then the university logo, else the withUS logo will be on the right side.

e.g.

<a href="http://withus.lmdev.co.uk/" class="x-brand img" title="Just another WordPress site">
  <img src="//withus.lmdev.co.uk/wp-content/uploads/2016/07/withus_logo.png" alt="Just another WordPress site"></a>
<img src="http://withus.lmdev.co.uk/wp-content/uploads/2016/07/sheffield_uni_logo.png" class="univlogo" alt="univlogo">

Thanks.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry this code is still not functioning correctly. Please see http://withus.lmdev.co.uk for the result.

The logo’s don’t sit central until they get to tablet view – I need it on all devices.

When they stack, the sheffield logo needs to sit top against the white line – exactly as the header menu works.

thank you

[Joao]

Hi There,

You had a a couple of unclosed media query tags on your code. I have fixed for you.

Have a look and let us know if you need further help.

Thanks

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

Yes the positioning is now correct on the desktop device BUT:

A) It needs to retain the small space between the logos until it stacks

B) When stacked the Sheffield logo must come first and sit against white line above

Sorry, it’s frustrating for me too

[Joao]

Hi There,

Please provide screenshots of what your are referring to and what you want to achieve.

I checked your website and couldn’t notice anything based on your description.

Thanks

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS:

@media (min-width: 520px) {
.univlogo {
margin-left: 50px;
}
}
@media (max-width: 520px) {
.univlogo {
margin-top: -320px;
}
.x-colophon.top .x-column {
    margin-top: 100px;
  }   
}

Hope that helps

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Joao]

Hi There,

Sorry for the confusion.

I have updated your code to:

@media (min-width: 520px) {

.x-colophon.top .univlogo {
margin-left: 50px;
}
}
@media (max-width: 520px) {

.x-colophon.top .univlogo {
margin-top: -320px;
}
.x-colophon.top .x-column {
    margin-top: 100px;
  }   
}

Now will just afftect the footer.

Hope that helps,

Let us know if you need help with anything else.

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

Thanks Joao,

That’s better but it still appears like the attached on mobile landscape – could it trigger the order a bit sooner?

thank you

[Nico]

Hi There,

You can adjust the px numbers of min-width and max-width to achieve the best time where the arrangement of your footer.

Hope it helps. Let us know how it goes.

Thanks.

[Author]

Posts