We have a responsive website which has a search field element showing at the very top centered horizontally. When you reduce the screen resolution to that of a tablet or mobile phone, the search field element disappears completely although if you inspect the code, the code is still there but the code is slightly greyed out and i guess this means it is disabled and therefore not shown.
How do i get this code to show in the tablet and mobile phone resolutions. How do i have this code not greyed out?
Viewing your CSS would help, but it looks like .header is set to display: none; or something similar in your CSS.
Related
I have looked around for the answer and a close article was this: HTML links not clickable on mobile, but are clickable on desktop
On my site: https://venueswl.com/
In the footer (only on an actual mobile device) the mobile and email links are black. However across desktop and laptop, these links are white and correctly working.
I can't see any blinding errors either using the inspect element on Google.
Any ideas?
Im making a Website with Media Queries. In the Mobile Version there should be a Hamburger-Dropdown Menu, where the Items are Centered, but on the Desktop Page the Menu-Items are not centered (they're normal). I've tried to add a Tag in the HTML and give it a Id, and delete it with js, but if i do this, the whole Menu disappears. Or i gave the Center a Id and wrote in the CSS, that the display is none, but also in this Case the whole Menu disappears. And if I write text-align: center in the CSS, it works when i rezise my browser Window on PC, but not on a real mobile device.
Thanks for your help.
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I built my second responsive site and I'm having an issue with scrolling on mobile. I've only checked a blackberry z10 so far but I've checked more than one of them. I've checked it on web inspect through the phones browser and I've also deleted each element and still no scrolling. Maybe someone can see what I'm obviously missing. Thanks in advance.
Remove float: left; on mobile screen for .movies. Then the height of the <body> tag will be calculated correctly.
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.