Mobile Site Issues for showing post element

Support
#1

Hello,

I am having a few issues with my homepage.

I tried to go to the site I am developing (i left a secured note about it) from my Andriod and iPhone and the “News and Press Release” section does not show the entire post on the screen - just a portion.

I used Chrome’s inspector to try to change the CSS to see if I could get it to show there, and it did. I copied the CSS from the inspector and it gave me an error.

Here is the CSS

@media screen and (max-width: 768px)
html body.page-id-8726 .x-section#x-section-2 {
width: 415px;
}

I changed the width in the inspector to 415 for mobile and it showed all post. Adding this to the additional CSS section under “customize” did not produce the same results, and gave me an error.

Is there any other way I can change this?

#2

Hi there,

Thanks for posting in.

You don’t need that CSS, the section should respond accordingly. The cause of that problem is this CSS

@media screen and (max-width: 768px) { html body.page-id-8726 .x-section#x-section-2 { width: 1216px; } }

Removing it should fix it, plus, I’m not sure what you’re trying to achieve with that, you’re forcing it’s width to 1216px under a device of 768px. Or perhaps, you need a min-width and not max-width on that one.

You have many @media query which a bit conflicting with each other. And you’re adding your CSS in many locations, you should add them in one location only so you can manage it easily, and much easier to troubleshoot.

Thanks!

#3

Thanks, but I deleted my media CSS when I saw it was not working. I left it there so you all could see what I tried to do.Even after removing it, the issue still shows on both Andriod and iPhone. I did not force it to a with of 1216, I actually forced it to a with of 415 for the news release section. It shows a with of 1216px when I went into the inspector for Chrome - that was not something that I did.

I only added the code you mentioned to the 'Additional CSS" section under “customized”. I have removed it, and it still shows the section at 1216 px.

#4

Hi,

I can see a lot of conflicting CSS from CSS HERO Dynamic CSS & Font Loading

Please remove code that reads

@media screen and (max-width: 1024px) {

html body.page-id-8726 .x-section#x-section-2 {
    width: 838px;
}
}

Thanks

#5

Thanks. I disabled CSS Hero for now since I am no longer using it - and it worked. I will keep this in mind while modifying the site.

Thanks for your help!

#6

You’re welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.