Docs

[jsjmccracken]

Hello,

The logo isn’t responsive by not remaining transparent in mobile view. It is changing back to its original form with a black background.

Also, the slogan to the right of the logo isn’t responsive as well in mobile view. I’ve looked through my custom css and can’t see what it is causing the issues…?

Thank you!

Jacob McCracken

[Thai]

Hi There,

To fix this issue, please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .x-topbar .p-info {
        background-color: transparent;
    }
}

Hope it helps 🙂

[jsjmccracken]

It did for the logo 🙂

The slogan is still not responding correctly…?

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[jsjmccracken]

http://www.tablerockkennels.com/

[Jade]

Hi there,

It seems to be correct when I checked it.

Kindly try to clear your cache.

[jsjmccracken]

The slogan should be gold text in mobile view like it is in full view.

[Friech]

Hi There,

Look for this Custom CSS block

@media (min-width:  980px) {
	span#slogan {
	font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
	position: absolute;
    width: 45%;
    right: 10%;
    top: -65%;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent),
  url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}
}

Move the property font-size, font-family, text-align, background, -webkit-background-clip, and -webkit-text-fill-color outside the @media query.

span#slogan {
font-size: 3.25em;
font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
text-align: center;
background: -webkit-linear-gradient(transparent, transparent),
url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Thanks.

[jsjmccracken]

Thank you! The gold text is holding up on the slogan but it is not resizing appropriately. It’s still just as big in mobile view as it is in desktop view.

[Rupok]

Hi there,

Thanks for writing back! I can see the smaller text for mobile with no styling since the styling should work for 980px or higher screen size.

Let’s check again and confirm the issue.

Cheers!

[jsjmccracken]

I’d like the styling to be applied to the slogan in all views. Right now the slogan covers part of the logo, toggle navbar and rotating pictures.

[Joao]

Hi There,

You could try changing :

@media (min-width:  980px) {
	span#slogan {
	font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
	position: absolute;
    width: 45%;
    right: 10%;
    top: -65%;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent),
  url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}
}

To:

	span#slogan {
	font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
	position: absolute;
    width: 45%;
    right: 10%;
    top: -65%;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent),
  url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}

If that does not look good:

You could add the previous code back and add:

@media (max-width:  980px) {
	span#slogan {
	font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
	position: absolute;
    width: 45%;
    right: 10%;
    top: -65%;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent),
  url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	}
}

And than make your adjustments inside this code to fit screens below 980px

Hope it helps

[jsjmccracken]

How do I make adjustments inside this code to fit screens below 980px?

[Christopher]

Hi there,

Please update this code :

@media (min-width:  980px) {
}

  span#slogan {
	font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
	position: absolute;
    width: 45%;
    right: 10%;
    top: -65%;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent),
  url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

To :

@media (min-width:  980px) {
span#slogan {
    font-size: 3.25em;
    font-family: Vijaya, Tempus Sans ITC, Papyrus, Bradley Hand ITC;
    width: 45%;
    float: right;
    display: inline-block;
    padding-top: 14px;
    text-align: center;
    background: -webkit-linear-gradient(transparent, transparent), url(http://www.tablerockkennels.com/wp-content/uploads/2016/09/gold_text.jpg) repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#slogan {
    margin-top: 100px;
}
}

Please note that I put two closing brackets, one for CSS block the other for media query rule.

Remove following code :

#slogan {
    margin-top: 100px;
}
.ptl {
    margin-top: 100px;
}

Hope it helps.

[jsjmccracken]

That didn’t work 🙁

I just want the slogan to be responsive by keep the gold text and being below the logo in mobile view.

[Author]

Posts