Responsive Header Title issue

Illdy
1

I have my page all set up now, but still have some issues with the Titel not being responsive. The word breaks up into several segments instead of using smaller font. Can you help me with some code to fix this?

Also I would like to justify the text of the about section into the area of the bed in the background. I have solved this right now with html line breaks, but that makes the text unresponsive when viewed from a phone.

Thank you very much,

Roland

2

Hello there,

I hope you are doing well today.

Could you please provide a link to your website so that I can inspect it?

Best Regards,
Support

3

Sorry. I thought I had included it. www.rolandsgardenguesthouse.com

4

Hi,

  1. Try this Custom CSS for Responsive title,
@media only screen 
  and (max-width: 480px) {
#header .bottom-header h1 {
    font-size: 36px;
    line-height: 36px;
}
}
  1. Use this to justify the content in the mobile,
@media only screen 
  and (max-width: 480px) {
#about .section-header .section-description { text-align: justify; }
}

if you want to justify on the desktop too means, remove the @media query syntax.

Let us know,

Thanks,
laranz.

5

Two down one to go. The codes worked perfectly. But I wasn’t able to use the justify code without the @media for desktop. Somehow that didn’t work. Any ideas?

6

Hi,

If you meant, you want to add the Justify for the desktop also means, remove the @media and put the CSS like this,

#about .section-header .section-description { text-align: justify; }

Let us know,

Thanks,
laranz.

7

Hello @laranz,

With this css the text still comes out over the bed left and right when seen on the desktop. I would like to justify it to only show to the size of the bed in the background. Is that possible?

8

Hi,

You can do that with the media query,

@media only screen 
  and (max-width: 1200px) {
#about .section-header .section-description {
    margin: auto;
    width: 600px;
}
}

adjust the max width and the width according to the screen size, you want. :slight_smile:

More about the media query: Media Queries for Standard Devices | CSS-Tricks

Let us know,

Thanks,
laranz.