Hi Im building a responsive site with media queries and Im having problems with the smart phone. When previewed there seems to be a 30px border left and right. I have tried to 0px & 0% all margin and padding but it wont go away. Please see screen shot here
http://optimise-website-marketing.com/wp-content/themes/bones/images/photo.PNG
heres the site:
http://optimise-website-marketing.com/
Im using the following media queries:
/* iPhone [portrait + landscape] */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
Any help much appreciated :-)
Im waiting so much time pulling my hair out here, please can anyone shed some light on whats happening?
Matt
Line 1083 is the problem:
.page {
padding: 0 20px;
} /* general article on a page style */
Related
High all.
I have a site that works ok on MOST devices.
However, I'm having a problem with resizing when the screen is for an iPhone 13 mini.
I have the screen size set at 650X1315.
All is fine until the phone is in horizontal. At this point my css fails to do anything.
I have:
#media screen and (max-width: 650px) and (orientation:landscape)
I've tried changing lots of properties, but neither the div form will increase to contain the textarea, or will the textarea reduce to stay within the form div.
I've tried MANY css rules but nothing works for me in
#media screen and (max-width: 650px) and (orientation:landscape)
Everything else works with width fit-content
Can anyone suggest anything please?
I've included an image to show this.
try to add text-area: max-width:80%
also try to use other simulation's tools for iPhone
may it has bug
I've got an issue with visibility of HTML elements in Safari (Mobile and Desktop) not rendering in the foreground that I've spent at least 8 hours of dedicated troubleshooting on trying to address.
The concept I'm after seems very simple; I'm trying to display a couple of labels (<p>'s and <a>'s within a <div> that is position:absolute;. I'm leveraging a 3rd party Javascript coverflow that is forcing the absolute positioning but I'm willing to make any modifications needed to get this working.
I naturally assumed this was a z-index issue that was only effecting Safari but there are no rendering issues in Chrome, IE, Edge, and Firefox including Android mobile devices.
The issue can easily be reproduced on www.bibleanthem.com when looking at the media coverflow from iOS/Safari and likely macOS; for a brief second while it is initially loading, the elements are visible and then the album artwork moves to the foreground. You can also see a slight hint of the '+1' badge on the corner at the lower edge of the album artwork. You can even click where the two invisible buttons are and interact with the document (e.g. play song immediately or add to playlist).
What I've Tried
Changing (and IIRC dropping entirely) transform usage from each Coverflow item (see "Additional Detail" section below for an important note)
z-index changes (including absurdly large values like 10000000000000)
Changing position to fixed, relative, sticky for the parent div
Changing position to fixed, relative, sticky for child elements
Changing display between block and inline-block
Changing overflow on most elements in the hierarchy
Additional Detail
I've seen issues in the past with Safari not playing nicely with transform; that could be the issue here and the symptoms are very similar to my past experiences but I haven't been able to fix the issue. This is where I'd guess the problem actually resides.
Rendered HTML for each Coverflow item
<div style="position: absolute; display: block; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; max-width: none; max-height: none; border: none; line-height: 1; background-color: transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 95px; transform: translate(142px, 119px); opacity: 1;"><p class="largeLabel"><i class="fa fa-list-ol"></i><span class="badge">+1</span><i class="fa fa-play play-btn-adjust"></i></p><p class="smallLabel"><span class="title-cf-main">Song Title</span><br><span class="title-cf-artist">Artist Title</span><br><span class="title-cf-verse">Acts 17</span></p></div>
How To Reproduce
Visit www.bibleanthem.com from desktop or mobile Safari and notice how the album artwork takes foreground positioning over the label/text.
Desired End State
The blue background label, song title, artist title, and verse title should be visible above the album artwork in the coverflow (as seen in non-Safari browsers)
Thank you in advance for any assistance you can provide. I can't tell you how much I'd appreciate addressing this issue!
Try setting the z-index on the div instead of the label. If you create a fiddle I'll play around with it a little more.
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
Still can't handle with issue in non-responsive bootstrap3 http://getbootstrap.com/examples/non-responsive/
If you'll resize window to less then .container width you'll see 1px width space in this example too. I also got it on my iOS devices. And this kills me!
Screenshot http://cl.ly/image/1f0w342Q1q0a
I recently found this answer on SO, and was wondering if there is a syntax to accomplish this with breakpoint-sass plugin? Thanks.
EDIT (since there was confusion):
Have a breakpoint dependent on height and width, similar to this media query from the posted question.
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
Breakpoint allows for media breakpoint and or breakpoints, so constructing this MQ is fairly straight forward:
http://sassmeister.com/gist/3b7127ded8e032d90f4d