[coachingupliftingParticipant]

Hi Support,

I am having a hard time, aligning the marginless columns and making them responsive on my website http://www.upliftingcoaching.com
The columns are under the title “Our Services”.

Now I have added the Movie icon with the text – “Remove” to make a visual representation on how I want it to look, but aligned and responsive with this icons removed (with the text remove).

I was hoping you guys could help me out, I am really having a hard time on how to do this.

Regards,

[JoaoModerator]

Hi THere,

Can you provide a screenshot of what you are trying to fix? You can resize your browser to take a screenshot

I checked your page and I am a bit confused, Also I did not find “Movie icon with the text – “Remove” to make a visual representation on…”

Let us know more details,

Thanks

[coachingupliftingParticipant]

I marked the icons that I added to allign the website in red. I only added these icons, because I couldn’t get the 3 marginless windows to have the same lay out, in particular the images and the text:

“You will have 24/7 access to us via Email and Whatsapp for any questions/concerns you have.
We have a 24-hour response time guarantee!”

Is there a way to do it.

I also marked the miss alignment in yellow

Attachments:

You must be logged in to view attached files.

[LelyModerator]

Hi There,

Thank you for the clarification.
Let’s separate the content. We will use two text element instead. The top one will contain all you content until the icons. Then below it, add another text element, this time the content will be just this:

You will have 24/7 access to us via Email and Whatsapp for any questions/concerns you have.
We have a 24-hour response time guarantee!

On the top text element class field, add same-height. Do this on text element for the next 2 columns. You may now remove those Icon and text remove. Now, add this script on Settings Tab > Custom JS:

jQuery(document).ready(function($) {
	var max = 0;
	$(".same-height").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(".same-height").css('height', max);
});

The code will get each of the top text element height. Check which one has the maximum height and then set it back to every text element.

Hope this helps.

[coachingupliftingParticipant]

I tried, but I don’t get how to do it, i made a copy below the original and tried it out, but I don’t know how to do the last part.

Could you help me by logging in and making the changes?

[LelyModerator]

Hi There,

Please check attached screenshot for the setup. Then add the script on Settings Tab > Custom JS:.
If this still doesn’t work, please share your admin credentials on a private reply.

Attachments:

You must be logged in to view attached files.

[coachingupliftingParticipant]

Lely, your the best it worked!

I have 2 more questions, that I still need to resolve.

1. How can I do the same for the tiles under the title, “How does it work”, now the text is pretty similar but it will change and the sizes of the tiles will to.
2. In the One Page Navigation. The headers of the Menu links are greyed out with a red bar above them. I would not like them greyed out with the red bar above it, is it possible?

Let me know, many thanks for the support.

[RadModerator]

Hi there,

1. It will be tricky since it’s a flip card and it has its own dimension. Please add this CSS,

.x-card-outer .x-face-text {
    margin: 8px 0 0;
    min-height: 200px;
}

2. Please add this too

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: none;
color: #000;
}

Hope these helps.

[coachingupliftingParticipant]

Edit – It worked, many thanks!

[RadModerator]

You’re welcome!

[coachingupliftingParticipant]

Hey Rad,

I have yet another question relating to responsiveness. This time it’s the revolution slider. When viewing it on mobile device the text and image don’t adjust properly and look kinda weird.

url: http://www.upliftingcoaching.com

uploaded a image as well.

Attachments:

You must be logged in to view attached files.

[Paul RModerator]

Hi,

Please note that you can adjust the size and re-position your layers base on screen width in revslider.

Refer to the link below for your guide.

https://www.themepunch.com/revslider-doc/slide-layers/#layercanvas

Thanks

[coachingupliftingParticipant]

Yes this helped!

I also changed the icons for windows and apple phones, under appearance – site icons. But they don’t seem to work.
Could you check why?

[RadModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

For the meantime, please clear your server cache, and your browser’s cache. I checked the source code and I don’t see any icons.

Thanks!

[coachingupliftingParticipant]

I waited another day, and now it solved itself!

[Author]

Posts