Right justify subtitle in header image

Hi,

I was trying the code from this thread Header Slider Text Background, colour & Size to try and move around my subtitle text on the header image, but its not getting what i’m after. On my site www.ballardlakecapital.com i’m trying to leave the header BAllard Lake capital white and where it is, but likely change the text colour and hoping to make a right justified block for the subtitle so that it is clearer on the image i’ve used…

Thanks for any ideas,
Katie

Hi Katie,

As checked from your website’s source code, it shows your website has been cached with Endurance Page Cache plugin. This may retain the cached version to load on web browser and ignore the new code addition. Were you aware of this?

I request you to flush the cache and reload your page once again and see the difference.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for your previous help. I just noticed that after I had added the code of pad the margins to get my subtitle text to be more centered - it now isn’t mobile friendly… It looks as I had hoped on my laptop, but on mobile the text comes out all in one column… Any ideas what I could add in / change so that it appeard properly in both circumstances? My site again is www.ballardlakecapital.com

Thanks again,
Katie

Hi Katie,

After revisitting your site, I realized that changing the position of the slide description will caues another readability issue on smaller screens (mobile devices).

I’d offer you trying to change the color to more lighter. We can do this by adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .text-slider .subtitle {
        color: #fff;
    }

Let me know whether it is working for you or not.

Regards,
Kharis
aThemes Support

Hi,

I tried your idea but when i check on a smaller screen it still appears as a column like this:

Should I have removed some other code before adding this in? I didn’t save adding your above code in yet as it didn’t change what I saw, so let me know if you need to see how it looks with that added in, with the code as is.

Thanks for any additional ideas!
Katie

Please add the code and share your entire custom CSS code. Perhaps there is anything I can revise/improve.

I request you to use https://pastebin.com/ to share all of your custom CSS code to get the shareable link to it. Update me with the link as you reply to this thread.

Regards,
Kharis
aThemes Support

Hi,

Here is the pastebin as requested (hope it works, I’ve never used pastebin before)…

Thanks again,
Katie

Hi Katie,

Thank you for sharing the code.

I found these lines add extra padding to the slide subtitle. But it only works on larger screen. It results broken layout on smaller screen since the left and right areas are consumed by the padding.

    .text-slider .subtitle{
      padding-left: 190px;
      padding-right: 160px;
    }

Please replace that code with the below to make it only applies on desktop.

    @media only screen and (min-width: 1025px) {

      .text-slider .subtitle{
        padding-left: 190px;
        padding-right: 160px;
      }
      
    }

Regards,
Kharis
aThemes Support

Great Kharis,

That looks a million times better, we are so close! I’m just wondering now if I can add the same code to maybe customize it for tablet or mobile to maybe change the font color for those. I tried using

@media only screen and (min-width: 768px) and @media only screen and (min-width: 320px), @media only screen and (min-width: 400px)  

but neither seemed to work.

Those were the pixel suggestions I saw online, is there another number I should be trying?

Thanks again!

For smaller screen specific CSS, I would recommend this media query.

    @media only screen and (max-width: 1024px) {
        // Your CSS rules go here.
    }

For device specific size, refer to this article.

I hope this reply helps.

Let us know in new topics for your other questions.

Regards,
Kharis
aThemes Support

Hi again,

Sorry but when I added that code in for the smaller screens, nothing changed when I edited the font color, am I adding the code in the wrong spot / way? Sorry this tread has so many messages!! Here is the pastebin with the added code https://pastebin.com/ciBGLQGf

and here is a screenshot showing why the subtitle font should change

Thanks again for your help!
Katie

Hi Katie,

Your CSS code contains numerous errors and I just fixed them here.

Regards,
Kharis
aThemes Support

Amazing, that did it. Thank you for all your help on this!

Katie

You’re welcome Katie!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support