Button dissappears off mobile screen Zerif Lite

In your style.css file search for:

.custom-button {
	display: inline-block !important;
	text-align: center;
	text-transform: uppercase;
	padding: 13px 35px 13px 35px;
	border-radius: 4px;
	margin: 10px;
	border: none;
}

Replace it with:

.custom-button {
	display: inline-block !important;
        white-space: normal !important;
	text-align: center;
	text-transform: uppercase;
	padding: 13px 35px 13px 35px;
	border-radius: 4px;
	margin: 10px;
	border: none;
}

Thank you Faycal !!

I put it directly into my child theme and it worked perfectly !!

I can’t find how to change the colour of the button – do you know hopw to do this as well…?

It’s this:

.separator-one .green-btn {
    background: #4C5451;
}

Change the hex code, use this service https://www.w3schools.com/tags/ref_colorpicker.asp

Thanks again Faycal, it works perfectly !!

I then tried to change the text colour using:

.separator-one .text {
color: #FFF;
line-height: 34px;
padding: 0;
max-width: 800px;
margin-bottom: 20px;
margin-top: 15px;
}

But it didn’t work ??

I changed #FFF to #F00 and it changed the text colour ABOVE the button – not the text colour IN the button… I’ve searched for the word “separator” elsewhere in the code but can’t find it in relation to a colour.

Do you know where to find it?

It’s the same for the background, you just add color:

.separator-one .green-btn {
    background: #C00;
    color: #000 !important;
}

Make sure you add (!important) after the hex code to force it.

Wow, thank you SOOO much Faycal, another success ??

I tried adding the same code to change the button color in the Contact Us section, so it looked like this:

.contact-us .custom-button {
float: right;
margin-right: 15px;
color: #000 !important;
}

But it didn’t work… Do you know what I’ve done wrong…?

Search for this:

.pirate_forms .pirate-forms-submit-button {
	float: right;
	margin-right: 15px;
	color: #FFF !important;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

From here you can change the text color or add a background-color

You are a STAR !!

Your English is very good (so much so that I don’t think you’ve made any mistakes on this thread), but If you ever need / want to practice speaking (for free) – please, please, please send me a message (on here, or using the contact form on my website) ??

I will now post you a bigger challenge…

And now, for my biggest issue, which will DEFINITELY be a challenge…

On my website https://www.learnandspeakenglish.co.uk you will see bullet points in the Prices section – but I don’t want them (they appeared automatically)…

I think I know how to remove them from the code – but nobody can find the code…

If I right click and view page source, I can find the code (I have copied and pasted it below) – but I can’t find the code in the Editor – so I can’t amend it… Do you know where it is…?

<section class=”focus” id=”focus”>

<div class=”container”>

<!– SECTION HEADER –>

<div class=”section-header”>

<!– SECTION TITLE –>

<h2 class=”dark-text”>Prices</h2>
<div class=”section-legend”>Click below to book conversation classes or actual lessons – face-to-face, online or over the telephone ! From only 7,5€ / $7.5 per lesson !</div>
</div>

<div class=”row”>

<ul class=”product-categories”><li class=”cat-item cat-item-28″>Face-to-face: Conversation Classes
<li class=”cat-item cat-item-15″>Face-to-face: Lessons
<li class=”cat-item cat-item-29″>Online: Conversation Classes
<li class=”cat-item cat-item-19″>Online: Lessons
<li class=”cat-item cat-item-30″>Telephone: Conversation Classes
<li class=”cat-item cat-item-17″>Telephone: Lessons

I appreciate your kindness, as for those bullet points in your list items, try adding this to your style.css:

.product-categories {
    list-style: none;
}

Damn, not all the text has come through on the above message… I’ll try sending it again. If it doesn’t come through, and you need it, let me know and I’ll find a way of getting it to you.

PS. The links (and probably the bullet points as well) in my Prices section (AKA ‘Our Focus section’) come from a Woocommerce widget called Product Categories.

<section class=”focus” id=”focus”>

<div class=”container”>

<!– SECTION HEADER –>

<div class=”section-header”>

<!– SECTION TITLE –>

<h2 class=”dark-text”>Prices</h2>
<div class=”section-legend”>Click below to book conversation classes or actual lessons – face-to-face, online or over the telephone ! From only 7,5€ / $7.5 per lesson !</div>
</div>

<div class=”row”>

<ul class=”product-categories”><li class=”cat-item cat-item-28″>Face-to-face: Conversation Classes
<li class=”cat-item cat-item-15″>Face-to-face: Lessons
<li class=”cat-item cat-item-29″>Online: Conversation Classes
<li class=”cat-item cat-item-19″>Online: Lessons
<li class=”cat-item cat-item-30″>Telephone: Conversation Classes
<li class=”cat-item cat-item-17″>Telephone: Lessons

Oh my… It worked !! Thank you AGAIN !!

I can’t believe it…! It took three friends and I four days and we couldn’t figure it out…!

?? ?? ??

And now for the FINAL challenge…

How do I change the 6 links in my Prices section into pictures of my products (that will act as a link to show product details)? I’ve searched for a solution, and Plugins, but I have come up with nothing…

I don’t think it’s possible! perhaps with their pro version you can, you should contact them about this
https://themeisle.com/themes/zerif-pro-one-page-wordpress-theme/

Damn and blast…

After doing so much work on the Lite version I’m reluctant to change ?? But, if I can’t get the ‘shop’ I want, I may have to…

Thanks so much for all your help Faycal ??

And if you get bored, you can help solve my next problem ?? When I click on one of my 6 links in the prices section, it takes me to a page showing the 3 associated products – but the images are blurry.

When one of these 3 products are clicked (to take me to product details) the image I see on the page is clear, and when I go back to the previous page – the images (which were blurry the first time) are now clear…

How do I get the images not to be blurry the first time I see them…?

Clicking on one of those links takes me nowhere!