Mobile version turned messy

Hi there!

I’m still super happy with this theme but for some reason my site turns really messy when visited on a mobile Phone. I have the same theme working on a different site and it works great on that one. I thought it might have something to do with some CSS I added to disable the slider on small screens, but when I deleted that code the issue remains. So what excatly is the issue? When accessing my homepage (either with or without slider) the site adjust great to a mobile screen on iPhones, but when I click on a post that page doesn’t adjust and instead shows half of the page (see screenshot). This is on iPhones; on Android it also displays the homepage like this. The slider however remains adjusted. Another issue on Android is that if I double tap to zoom out, the little Arrow that’s supposed to be on the right bottom of the screen is displayed in the middle of the page. I hope you understand what I mean…

Anyone an idea how to fix this? As a side note, I also added some code because my title links and “continue reading” links were not working on mobile but the issues described above remain if I remove that code as well.

Thanks so much!

Okay so I figured out that it has to do with the images that are used in the slider. I use a category called “featured” from where I derive the images for the slider. These images are uploaded with the recommended pixel width of 1920px. Posts that are not in that “featured” category and have a regular 730px width featured image behave normally on mobile phones. Can anyone please help me out? Thanks!

Hi guys! Does anyone have an idea what could be causing this? I would really like to “launch” my new site this weekend but if the mobile version looks like this I can’t. Maybe I just need to disable the responsive design altogether (which I really don’t want to do)?

Hi @aigars or @movin, could you please help me figure this stuff out? I can’t for the life of me understand what went wrong. Thanks!

Hi @littlelarey,

Sorry to hear of the problem you are having.

Could you please share your site URL so that i can troubleshoot the issue?

Is the Dazzling theme demo displayed here https://colorlib.com/dazzling/ working fine for you on your mobile devices?

Also please take a back up of your current modified Dazzling theme and then delete it from your site and install the fresh version of it by getting it from the following page.

Kind Regards,
Movin

Great thanks for taking the time @Movin! My site is www.littlelareyloves.com. The homepage works fine on mobile but when you click on my latest post link (Inside Turkmenistan) you’ll see that something changes. I currently have three posts displayed in my slider and only one of them works fine (the one about Hong Kong). So I’m guessing it has something to do with the slider images but I don’t get why that particular one works well. Other posts with the same size featured image you can find here and here.

Hi @littlelarey,

Thank you for sharing your site URL.

Your blog is very good. I liked it,.

To resolve the issue could you please try adding the following CSS code on your site using the plugin Simple Custom CSS – WordPress plugin | WordPress.org

.map > div {
  max-width: 100%;
}
div#primary {
  max-width: 100%;
}

Best Regards,
Movin

Hi @movin!

Thanks for the compliment, I’m glad you like it :). Just a question: doe I need to add this CSS to the plugin or can I just as well add it to the CSS editor on my wordpress admin dashboard?

Nevermind, I added the CSS to my editor and it worked!! I checked it on responsinator and everything seems fine now. You’re a rock star, thanks so much for your help!

You are most welcome here :slight_smile:

Please keep in mind that if you make changes in the theme file from theme editor then you have to make these changes again after theme updation as changes made in the theme files get lost on theme updation.

I use the Edit CSS from Jetpack, and I can’t remember that my CSS changes were gone after an update but maybe the theme hasn’t updated in the last year? Otherwise I just make a copy of my added CSS before I update and then add the CSS after the update. Thanks for the heads up though!

I was talking about saving the code in the theme files using theme editor. The Jetpack is also the plugin so the CSS saved in its Custom CSS module from the Edit CSS screen will not get lost on theme updation so nothing to worry about :slight_smile:

Hello littlelarey
How did you make dazzling theme working on mobiles, I see you made wor READ MORE.
Thanks so much
Aureliano

Hi Aureliano,

Thanks for posting in the forum.

To help keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/dazzling/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Cheers,
Movin