# Where to edit the responsive html codes for the main page for my website

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..

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. .

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!

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.

• Thank you guys. That actually fixed the issue with the first bit of the text with the "Maths is Hard. ....". Wow! – Will Kim Jun 14 '17 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 Jun 14 '17 at 8:08
• 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 Jun 14 '17 at 8:23
• I am definitely going to try this! Thank you so much! – Will Kim Jun 14 '17 at 8:42

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.