[Resolved] How to get header image to fit all 3 formats (Desktop, Tablet and Mobile)

[Leo]

Really hard to debug this type of issues without seeing it.

Is there a test server you can put the site on?

[Sally]

Just discovered that I can share it with you this way, result!

http://46.32.240.41/hemdcrafts.com/

Thanks,
Sally

[David]

Hi Sally,

lets try this adding CSS:

.inside-header {
    padding: 28% 40px 28% 40px;
}

[Sally]

Have put the CSS in doesn’t seemed to have changed anything and now the text is appearing slightly squashed on the Tablet preview too. Only in that first text box on the Home page, the rest are all fine.

Thanks,
Sally

[David]

Hi Sally, can you remove the other CSS i provided and just add the one above please. let me know

[Sally]

Dooh, didn’t think of that! Thanks that worked to fix the header problem, seems fine on all 3 platforms now.

Still got the issue with the text in the first text box on the Home page in Tablet and Mobile mode. Would it be easier to delete and do this one box again to see if it works or any suggestions?

Thanks for all of your help!
Sally

[David]

You need to adjust the line-height in the Typography settings of that Text widget, its currently at 0.2em 🙂

[Sally]

Mmmm interesting, it is set as default in Customise as 1.5 Then if I go to Elementor, it is all set on default and all text boxes are the same.
If I go in to adjust the line height for this text box in Elementor, it doesn’t solve the problem as it does space height wise the text but it is still writing over its self……..

Will have a go at deleting this specific text box and duplicating one of the others, to see if this solves the problem. Really strange as they are all done exactly the same way!

Very very happy with your support :-)!

[David]

Occasionally the CSS can get ‘locked-in’ and rebuilding a section is the easiest solution.
Glad we could be of help.

[Sally]

Ok, so I have tried everything. First Duplicating, then entire new section, then drag and drop a text box in and nothing was working!!!!

So what I did was duplicate one of the text boxes from further down the page, moved it up and then wrote in the text, that seemed to work. No idea why using the same box or complete new one didn’t work, but sorted now.

Thank you again for all of your help!
Sally

[David]

Glad to hear you got it working. And you’re very welcome

[Author]

Posts