Jumbotron & Headers not mobile responsive, any help appreciated!

Illdy
1

Hi there!

Thanks for the great free theme and all the excellent things you do. I am having trouble with my new website on mobile phones. I don’t have access to a tablet, so not sure if the headers are responsive on tablets. Everything is fine on a desktop/laptop screen. I have two issues:

  1. On mobile, the header & jumbotron images are blown up. I see there are multiple threads with this issue bbut that the solutions seem to vary a bit from one person’s site to another. I’ve tried entering some of the codes I’ve seen into the ‘Additional CSS’ area on the illdy theme customizer, but they haven’t worked for me. Screen shots below of both vertical & horizontal viewing.

Site is: corissascanines.com corissascanines.com

  1. On the front page, my second line of text over the jumbotron image-- “Cats and Critters Welcome”–changes font on mobile screens. It is fine when visiting from a desk top.

Thanks in advance for your time! Still finishing the site, but is live, would like to be able to refer my clients/potential clients to it. Many of them would be visiting on their phones, so hoping to resolve this asap :slight_smile:

2

Hi @branwyn151,

Try to add this css code:

@media only screen and (max-width: 768px) {
#header {
background-attachment: initial !important;
}
#header .bottom-header h2 {
font-size:66px;
}
}

Thanks,

Cristian

3

Hi Cristian,

Thank you for your help! I really appreciate it. The coding worked perfectly to adjust the header & jumbotron images. Hooray!

The only issue I still have is with the font of the “Cats & Critters Welcome” line. I currently have the following code entered in, as I wanted a different font for that line than the theme default:

#header .bottom-header p {
font-size: 35px;
color: white;
font-family: arial black;
}

The font is correct when the site is viewed on a computer, but reverts to the font seen in the screenshots above when viewed on a mobile. Any additional code I can add to address this on mobile?

Thanks again–
Corissa

4

Hi Corissa,

Try this:

@media only screen and (max-width: 330px){
#header .bottom-header p {
font-size: 35px;
color: white;
font-family: arial black;
}
}

Thanks,

Cristian

5

Hi Cristian,

Unfortunately not having any luck with the above code for correcting the font on mobile screens. Anything else you suggest?

Thank you again for your time & effort!!!

Corissa

6

Hi.

I figured out the issue this morning…

On chrome when you are looking at the website right click on the header and click ‘inspect’. Find the header and after the class “col-sm-12” double click and make a new class next to it eg:headertitle.

Then I added this in custom CSS:
@media screen and (max-width: 650px) {
.headertitle {
font-size: 0.7em;
}}

@media screen and (max-width: 480px) {
.headertitle {
font-size: 0.5em;
}}

7

Hi there,
Thanks for keeping in touch with us.

This issue is one of many that comes with the whole idea of getting websites to be viewable on mobile phones and is something that is really hard to control, especially with the use of images that were never really made to be used on phones, an issue that is totally beyond our control, as a result, we have times like this.

I went on @branwyn151’s site and I picked my brain for quite a while, and then I had a bit of a eureka moment:

From your jumbotron image, you could try to crop a mobile version from it (height-biased rectangle, approximately 640x960px), upload that, and get the link, and add it to the CSS here:

@media(max-width:550px){
  #header{
    background-image: url("https://yourimagelinkhere/")!important;
  }
}

You will then be able to replace the widescreen image with a portrait mobile friendly image.

I hope this helps.

Best Regards,
Support

8

Could a similar code work for the Jumbotron as well?
If so what would that look like?
Chris