responsive page titles

13 replies · opened Oct 18, 2017

PpixelsalsaOct 18, 2017

I have an issue with responsive titles..

EG: http://www.redhousebarn.co.uk/weddings/civil-ceremonies.php

Looks great on desktop but on smaller devices i'd like the image to be img-responsive and the overlay text shift neatly below the image but above the page content.

I am competent to look at it but would like your feedback on this.

Thanks
Dan

PpixelsalsaOct 19, 2017

[sb_private_reply]Hello

24 hours since i posted this - please respond.[/sb_private_reply]

PpixelsalsaOct 20, 2017

[sb_private_reply]this has been ignored for 2 days - it is very frustrating!

i have paid for support and am not getting value[/sb_private_reply]

PpixelsalsaOct 21, 2017

hi
still no reply??

why?

NNJTSOct 21, 2017

hi, I have similar problem.
check this out: http://support.semicolonweb.com/forums/topic/image-responsiveness-and-contact-form-and-google-map/
it gave me some ideas.

or go to css/responsive.css and below @media (max-width: 479px) try wuth some code.
e.g. I add:

#page-title h1,.h1 {
margin-top: -200px;
margin-bottom: 10px;

and it helped me with moving title up, on mobile only.
let me know what u thing.
p.s. Im not a pro.

SSemicolon WebSTAFFOct 23, 2017

Hello,

Thanks for your Patience!

Since the Page Title uses a Background Image, the .img-responsive Functionality will not work on this. However, you can consider hiding the Background Image and display a Static Responsive Image on Mobile Devices.

Consider using the following HTML Code:


	
		
![attachment](images/parallax/title-civil.jpg)

		Civil Ceremonies
		
Rustic & Romantic

and the following CSS Code:

.device-xs #page-title.page-title-parallax,
.device-xxs #page-title.page-title-parallax { background-image: none; }

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.

PpixelsalsaOct 23, 2017

Hi - looks like th eimage snaps in but the bg image is still there:

http://www.redhousebarn.co.uk/weddings/civil-ceremonies.php

Can you double check please?

Thanks
Dan

SSemicolon WebSTAFFOct 23, 2017

Hello,

The Position of the CSS Code is incorrect because you are using it inside the style.css File! It is always recommended to use the Custom CSS Codes inside the css/custom.css File! Please make sure that you do not change the style.css File which will make it difficult to Update the Website. Make sure that you use the css/custom.css File and move all your Custom Codes directly into this File. More Setup Instructions about this can be found in the Documentation > Start > Customization Section. Additionally, use background-image: none !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.

PpixelsalsaOct 24, 2017

Thanks, ok so really close with this but i have an issue with padding. See attached screenshot.

I changed the code to ensure i didn't get padding around the responsive image:

&lt;div class="container clearfix"&gt;
    &lt;h1 data-animate="fadeInUp"&gt;&lt;span class="colorwrap"&gt;Civil Ceremonies&lt;/span&gt;&lt;/h1&gt;
    &lt;span data-animate="fadeInUp" data-delay="300"&gt;&lt;p class="colorwrap"&gt;Rustic & Romantic&lt;/p&gt;&lt;/span&gt;
&lt;/div&gt;

</section>
<section id="page-title" class="page-title-parallax visible-xs bottommargin-sm">

&lt;div class="container clearfix"&gt;

    &lt;h1 data-animate="fadeInUp"&gt;&lt;span class="colorwrap"&gt;Civil Ceremonies&lt;/span&gt;&lt;/h1&gt;
    &lt;span data-animate="fadeInUp" data-delay="300"&gt;&lt;p class="colorwrap"&gt;Rustic & Romantic&lt;/p&gt;&lt;/span&gt;
&lt;/div&gt;

</section>

Can you take a look at how to close the vertcial gap up please.

Thanks
Dan

PpixelsalsaOct 24, 2017

`sorry - i meant this code:

&lt;div class="container clearfix"&gt;
    &lt;h1 data-animate="fadeInUp"&gt;&lt;span class="colorwrap"&gt;Civil Ceremonies&lt;/span&gt;&lt;/h1&gt;
    &lt;span data-animate="fadeInUp" data-delay="300"&gt;&lt;p class="colorwrap"&gt;Rustic & Romantic&lt;/p&gt;&lt;/span&gt;
&lt;/div&gt;

</section>
<section id="page-title" class="page-title-parallax visible-xs bottommargin-sm">

&lt;div class="container clearfix"&gt;
    &lt;img src="/images/parallax/title-civil.jpg" alt="Civil Ceremonies" class="visible-xs bottommargin-sm"&gt;
    &lt;h1 data-animate="fadeInUp"&gt;&lt;span class="colorwrap"&gt;Civil Ceremonies&lt;/span&gt;&lt;/h1&gt;
    &lt;span data-animate="fadeInUp" data-delay="300"&gt;&lt;p class="colorwrap"&gt;Rustic & Romantic&lt;/p&gt;&lt;/span&gt;
&lt;/div&gt;

</section>

PpixelsalsaOct 24, 2017

can you review this please?

PpixelsalsaOct 25, 2017

Hello - again i am chasing a response - when you provide support it is good but too many times am left waiting

PpixelsalsaOct 26, 2017

come on, please address this issue - i am getting ignored

SSemicolon WebSTAFFOct 28, 2017

Hello,

Thanks for your Patience! You can simply use the following CSS Code to modify the Padding Bottom of the Page Title on Mobile Devices:

.device-xs #page-title.page-title-parallax,
.device-xxs #page-title.page-title-parallax { padding-bottom: 100px !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.

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