@media query on my child theme’s styles?
If you are modifying CSS that’s in a media query, probably.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Don’t put padding (right/ left) on things in combination with a 100% – Try resolving that issue first.
Thank you WPyogi for just making me feel inferior to you and not helping at all.
Can anyone else help with this issue?
I’m sure I’ve done something I shouldn’t have done, but obviously, I am not very experienced and need some help.
Thank you
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
That wasn’t nice, perhaps I’ll not help afterall.
I thought his feedback sounded condescending.
I apologize if it wasn’t intended to be. I read it and it doesn’t offer any solutions. Does it?
Thank you
I’m sorry it sounded that way – wasn’t my intention. However, I’d just deleted a duplicate thread of yours (which is specifically against the forum rules) – and answered this one so that it would not stay further down the list.
Yes sir…I noticed you did. I was trying to create a new thread with a better title to maybe get to the bottom of the issue. Then I tried to delete this thread but it wouldn’t let me and I got stuck with 2 of the same which I know is against the rules. I apologize, once it was done, I couldn’t go back…
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Don’t put padding (right/ left) on things in combination with a 100%
Sorry, I meant to say “with a 100% width”.
Yeah, I figured 🙂
That didn’t work, however. Trying to go through all my code again.
I don’t understand why this is happening. Specially to a page with no information on it. I was reading that using images with a set width could cause this problem, or that certain short codes would also trigger this mysterious margin, but I have nothing on this page…
The header, navigation bar and footer all seem to be responsive.
Something about the entry.content, page.content or site.info classes not respecting the full responsive aspect of my child theme and I still can’t figure it out
Thank you for the help
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I found it had something to do with the footer.
Andrew
Care to share your findings?
How can I fix what I did wrong? I messed with the footer widgets because it is the only way to achieve that look on a computer screen. I definitely dont understand the Masonry footer widget deal… Can I include some code using media query to display on smaller devices or should I revert the changes made to the footer and the widgets?
Thanks again
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I opened your site in Google Chrome & right clicked on the page (anywhere) and selected “Inspect element”.
I then started deleting HTML elements in the inspector toolbar. The horizontal scrollbar disappeared at a mobile phone size when I deleted the footer.
The width here seems to be problematic:
.site-footer .widget {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
float: left;
height: 100px;
margin-right: 20px;
width: 236px;
}
Could it be that my width above is slightly smaller than the widths set up in the widget-area masonry? (Only by 12 px)
I tried adjusting my widget widths to fit the widths of the class: widget-area masonry but the issue still persists.
I shouldn’t have to delete the whole footer to be able to display this site at full width on mobile devices.
Still can’t figure it out 🙁
After trying some more, it seems to be something in the main body of the page template… I have tried deleting the paddings and margins on all and any element on the body and I still get that empty space on the right of the window.
I tested it on my contact page with a responsive google map plugin and when I get rid of the margins and paddings, the map appears perfectly centered on the body of my page, but then I still have that empty space to the right. Almost like I can’t control this using simple css.
Does anybody else have this problem?
Guillermo
