Change ACM module title size only in smartphones

jross

Hello, I am using the following code in my custom.css file to change the title size of the ACM slideshow module.
.slideshow .slider-content-inner .item-title {
font-size: 70px!important;
color: #eeeeee!important;
margin-top: 0;
}

I´d like to also change the title size when viewed on smartphones and tablets to be a different value than 70px.
Is there some CSS code that will display the slideshow title for just tablets and smartphones to say 30px?
Thanks,
JR

Ninja

jross
Hi
use this code in custom.css file

@media(max-width:768px){.slideshow .slider-content-inner .item-title {
font-size: 30px!important;

}}

It work only for small devices.

Regards

jross

Thank you, that works well.
JR :-)

jross

Oooops. I just noticed that the titles no longer appear on the desktop version of the website??

jross

Is there a solution for different size fonts, depending on what device the user is using to view the website?
I was hoping to retain the 70px size for desktop viewing of the website

Ninja

jross Is there a solution for different size fonts, depending on what device the user is using to view the website?

Hi
The shared code used for the same, it will not work on PC view.
For hidden title i can see you added hidden-xs class to hide the title in pc view http://prntscr.com/mw5qmh
Kindly check and remove it to show the content in PC.

Regards

jross

Back again. The desktop version of the titles are there. They have just been shifted down below the slideshow

jross

Hello, I haven´t added the hidden-xs class to hide the title.
I have no idea where that might come from. It must be in the module or template code??

Ninja

jross
Kindly Edit fields in first post of this thread and submit a temp super user login for staff.
I will check it for you.

Regards

jross

Thank you. I have added the super user details

aman204

jross You may check now. Ref: screenshot

Have added this isolated file -/templates/ja_lawfirm/local/acm/slideshow/css/themes/blue/style.css to "Exclude file" from optimization as per documentation as the isolated file wasnt loading when being optimized

jross

Thank you but the changes you have made have completely changed the entire homepage formating. None of the modules look like they should anymore - refer to the JA Lawfirm demo page to see what I mean. I had the page and modules all looking good now it´s a disaster.
I had also turned off the mask for the ACM slideshow using the custom.css. This mask is now been re-applied.
Please fix the homepage formatting back to the way it should be. If necessary, remove the changes made today back to the way it was this morning. I´d rather have the site working properly even if it means the slideshow title is too big on mobiles.
Thanks, JR

aman204

jross Hi

Have removed the file reference which was being "excluded" from CSS optimization however the same will result in specific local CSS file - /templates/ja_lawfirm/local/acm/slideshow/css/themes/blue/style.css to not come into effect with "CSS optimization" turned on

Apart from this, Havent made any other change which should have any other adverse impact for other sections of site

Regards

jross

Hello, I have removed the code copied below from the custom.css file and everything is back to normal

@media(max-width:768px){.slideshow .slider-content-inner .item-title {
font-size: 30px!important;

}

Is there another CSS alternative I can use to make the font smaller on a smartphone that does not break the site?

Ninja

jross
Hi
The code is worked only for mobile, not clear what else you changed on site as the code is used to work only for small devices.

When i suggested the last code, it was tested on your site before suggestion and there was no issue.
If changed anything on site or added core in wrong formate that may create issue in css.
You can post a screenshot and illustrate your changes with device name, so i can check it better.

Regards