1. Anders Wiik
  2. SP Page Builder 3.x
  3. Saturday, 11 July 2020
Hello.

I have a website for our handball club (Titlehttp://www.skovdehf.se) where the logo are placed on top of the red and white top section. I'd like a copy of that on my other page Titlesponsor.skovdehf.se.

However, the first page is done by professionals in wordpress and the later, sponsor.skovdehf.se are a joomla site with page builder.
Is there any way to write a custom css code that makes the logo float on top of the red and white layers?

/Anders
Accepted Answer
Accepted Answer Pending Moderation
Hi,
Yes! You can use media queries in that case.
Here you go:

@media (max-width: 767px)
{
.logo img {
margin-top: -1.5rem !important;
}
}

@media screen and (max-width: 991px) and (min-width: 768px)
{
.logo img {
margin-top: -2rem !important;
}
}

@media (min-width: 992px)
{
.logo img {
margin-top: -2.5rem !important;
}
}


Please use this code instead of the previous one!

Best Regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # Permalink
Responses (5)
Accepted Answer Pending Moderation
Hi,
You may use the following code to your custom CSS:

.logo img {
margin-top: -2.5rem !important;
}

It will float the logo up! You can play with the value to suit your own choice.

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn

Best Regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 1
Accepted Answer Pending Moderation
Fantastic!! Very much thank you! This works very well as I wished for....
I see different result depending on screen size. Is there a way to add code so that it does different if is mobile or tablet, desktop?

/Anders


Hi,
You may use the following code to your custom CSS:

.logo img {
margin-top: -2.5rem !important;
}

It will float the logo up! You can play with the value to suit your own choice.

Note: Path towards custom CSS:
Extensions>Templates>Styles>
Click on your current default template name then choose Template Options.
Then find custom CSS within the custom code.
https://prnt.sc/pu705g
https://prnt.sc/pu70zn

Best Regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 2
Accepted Answer Pending Moderation
Thanks a lot!!!

/Anders

Hi,
Yes! You can use media queries in that case.
Here you go:

@media (max-width: 767px)
{
.logo img {
margin-top: -1.5rem !important;
}
}

@media screen and (max-width: 991px) and (min-width: 768px)
{
.logo img {
margin-top: -2rem !important;
}
}

@media (min-width: 992px)
{
.logo img {
margin-top: -2.5rem !important;
}
}


Please use this code instead of the previous one!

Best Regards
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 3
Accepted Answer Pending Moderation
Thanks a lot!!!

/Anders

Hi,
Yes! You can use media queries in that case.
Here you go:

@media (max-width: 767px)
{
.logo img {
margin-top: -1.5rem !important;
}
}

@media screen and (max-width: 991px) and (min-width: 768px)
{
.logo img {
margin-top: -2rem !important;
}
}

@media (min-width: 992px)
{
.logo img {
margin-top: -2.5rem !important;
}
}


Please use this code instead of the previous one!

Best Regards
You are always welcome:)
  1. more than a month ago
  2. SP Page Builder 3.x
  3. # 4


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.