1

I own a website called http://elitemaths.com.au/. Currently, the main page modules seem to be working fine on a desktop browser with "maths is hard..." div as well as the "Fulfill your...". I have attached a screenshot of this.enter image description here.

However, when I load the same page on my iphone 6, these divs are not working properly. The following is what I see on my phone. enter image description here.

Being fairly new to Joomla and html, I have no idea where would I go and try to sort this. I have had a look at the template.css file in the "/public_html/templates/elitemaths/local/css/themes/elitemaths" directory but cannot find where this module sits.

Could anyone suggest which file to work on to fix this issue? And could anyone suggest a possible fix if possible?

Thanks so much!

Improve this question

2 Answers 2

Reset to default
3

Those divs have the classes h2 visible-lg visible-md visible-sm

The following code hides those divs.

Line: 6685
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}

The reason that they are visible in large screens is this code:

Line: 6795
@media (min-width: 1200px) {
.visible-lg {
display: block !important;
}.....

you can find both codes in: http://elitemaths.com.au/templates/elitemaths/local/css/themes/elitemaths/bootstrap.css

You can remove the class visible-lg from the first code or even better edit the second.

Improve this answer
4
  • Thank you guys. That actually fixed the issue with the first bit of the text with the "Maths is Hard. ....". Wow!
    – Will Kim
    Commented Jun 14, 2017 at 7:51
  • Do you reckon you can give me tips on how to fix the second text with "Fulfill your potential ..."? Many thanks
    – Will Kim
    Commented Jun 14, 2017 at 8:08
  • 1
    Check the file elitemaths.com.au/templates/elitemaths/local/css/themes/… for @media screen and (min-width: 768px) { .tp-intro { padding:60px 0; } .tp-intro-feature { padding:60px 0; text-align:center; background:#fff; } the block is there but the background and padding changes. the class you are after is tp-intro-feature I suggest you install Firefug Addon for Firefox or use any of the other browsers inspect tools it will help you a lot.
    – John
    Commented Jun 14, 2017 at 8:23
  • I am definitely going to try this! Thank you so much!
    – Will Kim
    Commented Jun 14, 2017 at 8:42
2

Don't really know for your template but it can be the good file. It is generally a huge file :) It is protostar/css/template.css for the protostar template shipped with Joomla.
Once found, you should search the string @media. These are called Media Queries. They are used to define new style rules for different media types. You can type something like: 

@media screen and (max-width:640px) :{
    p {
        background-color: red; } }

In that case, paragraphs will have a red background-color when seen from a device which is a screen whose max resolution is 640px.
The word screen is important. It is the media type. Because you can specify things like print for printers !
This is the very basic principle.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.