Mobile or Tablet views not responsive

Illdy
1

I am in the middle of developing Illdy theme @ www.freshprofessionalcleaning.com but when viewed on a mobile device the title is all over the place…can anyone help. Thanks in advance

2

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

@media only screen and (max-width: 767px){
     #services .widget_illdy_service:nth-child(2){
          margin-top:0px!important;
}}

@media only screen and (max-width: 767px){
     #header.header-front-page{
         height: 600px!Important;
}
}

@media only screen and (max-width: 767px){
.bottom-header.front-page {
    padding-top: 0px!Important;
}
}

@media only screen and (max-width: 767px){
#header.header-front-page .bottom-header h1 {
    line-height:45px!Important;
    font-size: 44px!important;
    color: #ffffff;
}
}

@media only screen and (max-width: 767px){
.section-description h3 {
    font-size: 25px!important;
    line-height: 23px;
}
}

I hope this helps :slight_smile:

Best Regards,
Support

3

Thank you. Works perfect now…but is there any way to remove the footer section with all the widgets?

Many Thanks

4

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.bottom-footer .container {
    display: block!Important;
}

footer .container {
    display: none!Important;
}

I hope this helps :slight_smile:

Best Regards,
Support

5

I am having the same issue i have put the following code into the custom css. I am still not seeing a difference on my phones. Can anyone help please? link is: http://springhilldryerventcleaning.com/ Thank you

@media only screen and (max-width: 767px){
#services .widget_illdy_service:nth-child(2){
margin-top:0px!important;
}}

@media only screen and (max-width: 767px){
#header.header-front-page{
height: 600px!Important;
}
}

@media only screen and (max-width: 767px){
.bottom-header.front-page {
padding-top: 0px!Important;
}
}

@media only screen and (max-width: 767px){
#header.header-front-page .bottom-header h1 {
line-height:45px!Important;
font-size: 44px!important;
color: #ffffff;
}
}

@media only screen and (max-width: 767px){
.section-description h3 {
font-size: 25px!important;
line-height: 23px;
}
}

6

Hey @philp,
Hope you’re doing well today

The issue you’re having is a lot different from the other issue here.

Your banner image is a widescreen image, and as such, it will be impossible to display that entirely on a phone’s display. The code above won’t help you.

Is that the only issue you’re having? Please let me know exactly what you’d like to change on mobile and I’ll do my best to help you with that.

I look forward to your reply :slight_smile:

Best Regards,
Support

7

Hello I am well thank you and same to you. I would just like the image to not look so much different on mobile. The only issue I am having is that. Would I need to change the image size or?

8

Hi there,
Thanks for keeping in touch with us.

Your best bet would be to implement a taller image. Something that’s more height biased instead of width biased (meaning taller not wider). Of course, that will affect the desktop version of the site, however, you may be able to adjust the height using some CSS. Just play around with different image sizes until you get the right one. There really isn’t a way set in stone to get this done, so it’s really a matter of trial and error.

I hope this helps :slight_smile:

Best Regards,
Support

9

Hi.

I’m having a little trouble displaying pictures on mobile and tablet. (can only check on Apple devices).

  1. The logo on every page and post including front page looks smashed.
  2. Name of every page and post looks weird as well as header picture.
  3. Text and picture on a page don’t look responsive.
  4. On front page in About section the picture gets smashed as well.
  5. In tablet mode only Jumbotron section is not centered as on desktop mode.
  6. Is that possible to remove the default name and description of the website in Customizing ▸ Blog Options
    Blog Jumbotron Titles? It shows the name of the site automatically, but I already have logo for that.

Any chance you could help me fixing all of that?
Thank you in advance.

10

Hey @simba19,
Hope you’re doing well today

In the future, when filing such a large report, please consider creating your own support post so that we can cater to your issues without spamming other customers. Thank you :slight_smile:

Please provide a link to your site so that I may test it from my end and provide a solution.

I’m also going to ask that you disable all of your third-party plugins and see if this issue still exists.

If it resolves the issue I am going to then ask you to activate the disabled plugins one by one and test the page to see if we can isolate the conflicting plugin if that is the case.

I look forward to your reply :slight_smile:

Best Regards,
Support

11

Hi.

Sorry, didn’t know where to write. Hopefully I won’t have any issues in the future.
The site is milailkova.com

Thank you in advance.

12

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:


@media (max-width: 500px){
.top-header img {
    height: auto!Important;
}}

@media (max-width: 500px){
.markup-format img.alignleft {
    float: left;
    width: 100%!Important;
    margin: 0 1em 1em 0;
}}

@media (max-width: 500px){
.section-description img {
    max-width: 100%;
    height: auto!Important;
}}

@media (max-width: 500px){
#header.header-front-page .bottom-header h1{
    font-size:32px!important;
}}

.blog .bottom-header.blog h2, .bottom-header.blog p {
    display: none;
}

I hope this helps :slight_smile:

Best Regards,
Support