8 replies · opened May 20, 2019
Hello,
I'm using a page title image of the class "page-title-parallax page-title-dark" (just like in your about-me.html). However, when viewed on a mobile phone, the image is not made smaller. Instead, the covers the entire screen height and only the leftmost part is visible. How can I:
Hello,
Can you please provide us with a Live URL so that we can check out the exact issue as this appears to be working as expected. Thanks for your Patience.
To make the Font Sizes smaller, simply use the following CSS Code:
.device-xs #page-title.page-title-parallax h1 { font-size: 20px; }
.device-xs #page-title.page-title-parallax span { font-size: 14px; }Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Hello,
We are not live yet so unfortunately there is no url to send. I understand that the class I mention above works as expected, but what I am asking is if there is a way to make the title image in about-me.html to behave like the title images (in the slider) in index-corporate-2.html. In other words: how can i make the title image in about-me.html shrink like the images in index-corporate-2.html on a mobile screen?
I'm sure you have a css class for that but I cannot find it. One alternative would be to make a slider with just one image but that is an ugly workaround that I would like to avoid.
Hello,
Thanks for the detailed explanation as now we understand what you actually wanted to achieve with the Page Title area. Thanks for your Patience!
It appears that you had wanted to make the Height of the Page Title area smaller on Mobile Devices. In this case, simply use the following CSS Code:
.device-xs #page-title.page-title-parallax { padding: 120px 0 !important; }This will definitely work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
It worked like a charm, thanks!
In your previous post, you explained how to make the text smaller on mobile screens. Is there a way to position the text differently on mobile screens. I use "page-title-right" for big screens but I would like to use another default value or even a custom value on mobile screens. Is that possible?
Hello,
Absolutely! You can simply use the following code as reference:
.device-xs #page-title.page-title-parallax { text-align: left !important; }You can add any CSS Property to this according to your needs and it will be only applied on the Mobile Devices.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Sorry, I may have been unclear, but I need to be able to position the text individually for each image when on a mobile screen. I need to be able to do this both for "slider.slider-element slider-parallax" and for "page-title.page-title-parallax" type of images.
I could create css classes for each of them and put "device-xs" in front, but that would be an ugly solution. I was more hoping there was a way to handle this within the style-parameter of the html tag itself. Is that possible?
Hello,
Unfortunately not! It is recommended to use the CSS Classes instead. Additionally, please make sure that you use the css/custom.css File as explained in the Documentation > Start > Customization Section so that when we release updates, your Customizations are intact.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Ok, I will use classes.
Thanks for your help! :o)
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard