Joomla Templates Club 406,261 posts

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1006832

splitting this from the prev topic

The make an appointment button doesn’t appear correctly after moving it from the features intro position to footer and back – note if i move it to the footer it displays properly but in the features intro position it just shows a green bar.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1006868

Hi,

Your site seems to be in offline mode now, could you update the login credentials of your site so I can take a look?

Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1007428

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1007490

It due to the wrong markup used in output of module, I just updated for you with:

<div class="main-container clearfix"><div class="text-banner"><p> </p><p></p></div> <a class="btn btn-border" href="index.php/about-us/make-an-appointment">Make an appointment</a></div>

As you can see that it’s working fine now. Kindly take a look.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008055

hi thankyou, the appointment button now works great on the bottom of the page. But now I notice the appointment button on the top of the page behaves strangely in the small and extra small responsive layouts.

Instead of appearing below the image, as setup in the layout section, it appears beside it. Would you also know how to resolve the issue with the top appointment button?

refer to attachment for screenshot

---

Attachments:

1. appointment-button-error.pdf

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1008424

It’s the same issue as appointment button at the bottom, you should use this mockup for module on top:

<a class="btn btn-secondary" href="index.php/about-us/make-an-appointment"><i class="fa fa-comments-o"></i><span>Make An Appointment</span></a>

I updated for you and it shows fine now.

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008626

thank you that worked perfectly on the large responsive mode, however if viewing in medium mode or with responsive mode turned off the button changes from saying appointment to a image of speech bubbles. Is there code I can enter to control how this changes? I would prefer to keep it as a button with the make an appointment text

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1008683

Hi,

You can control how it shows via css. Add this css rule into the file: ROOT/templates/ja_medicare (your default template)/css/custom.css

.appointment-content i {
    display: none;
}

.appointment-content .btn span {
    display: block;
}

Regards

[dr_tatian Friend dr_tatianJoin date: July 2015Posts: 48Downloads:8Uploads:8 Thanks: 4]

#1008904

thank you would you be able to describe the functionality in the code above so that I can amend myself in future?

I assume

.appointment-content i {    display: none;}

shows the smaller version with no text and the speech bubble

and

.appointment-content .btn span {    display: block;}

shows the full text version of the button

How would I set it so that in certain resopnsive modes on version shows rather than the other? e.g. right now it shows the non text version in xs, how would i set that vs showing the full text version?

I am hoping that if I can understand how to set it in all screen layouts then I can make the tweaks without your futher help.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1008939

Hi,

In small view port in our demo site, the ‘Make an Appointment’ text will be hidden and the image of speech bubbles will be shown with following css rule:

.appointment-content i {    display: block;}
.appointment-content .btn span {
    display: none;
}

Hence, when you want to always show the appointment text, you must hide the speech bubbles by using the ‘display: none;’ property as my above post.

The template is built with T3 framework which implements Bootstrap so you can use the Media Queries to declare specific css rules to respective screen size (small / medium / large / etc…). Please check out this reference for the details: http://getbootstrap.com/css/#grid-media-queries

Hope this makes senses.

Regards

1 user says Thank You to Saguaros for this useful post

1. dr_tatian

[Author]

Posts