I have testing site with eshop (I don't have permission to backend, just need to use or .
The website is there -> Click the link
You can see the blue banner in the middle between the products. I am using to show the banner on mobile too (by default they are invisible under 767px).
It works (if you use developer tools in Chrome or Mozilla), banners are showing, but if I load the site on mobile, banners are not visible and I don't know why.
Any ideas?
The default code is this:
#media (min-width: 767px){.banners-top,.banners-content,.banners-footer{display:block}
{.banners-top,.banners-content,.banners-footer{display: none}
I am using this code to show the banners on small screens:
#media (min-width: 200px){.banners-top,.banners-content,.banners-footer{display:block}
I already done it. If I inspect the site it says for the banner {display: block}.
On desktop, if I set up 400px, the banner shows up, but if I turn the mobile, it doesnt shop up.
See -> Desktop
Mobile
Related
//Initial situation - What I have and what I want
I am using WordPress version 5.1.1 with the Elementor Page Builder Plugin version 2.5.8 and I want to make a responsive website looking good on both desktop and mobile, tablet as well.
So I have a section with two columns within the row where below is the same system for 2 more times on desktop view. When it comes to mobile, I want a different adjustment.
so the trick I use is, I duplicate the widget and align the elements within the second section and set the first one to hide on mobile and the second to hide on desktop and tablet. So far so good, it seems all working.
//The problem - What doesn't work and needs to be fixed
As I told above, the system I use seems to be working, on mobile it only shows the second section, on desktop only the first. Tested on 100% size in the windows display settings and zoom in the browser and separate browsers.
BUT When it comes to 125% in the windows display settings and I split the page via the windows function to half of the screen, it shows both sections which either doesn't look good and really isn't what I want and need. It only happens with Google Chrome browser, all others "decide" which device it's using at the moment, only chrome shows on 125% AND half screen at the same time both sections.
What can I do / How can I fix this issue?
Edge eg. sets on the half screen to tablet while Chrome is still in Desktop.
MAybe it has something to do with Madia breakpoints? Can I change them in WP-Settings?
Thanks in advance and best regards!
Edit: Pictures to show what it kinda looks like:
This is the standard desktop view of this section
This is the standard tablet view of the second section
This is how it looks in Google Chrome 125% Windows 100% Browser Zoom Half Screen
Don't have any manual media queries, they're all standard. Works with all on 100% Windows resolution, only on 125% Google Chrome it's weird.
This is my first time designing a responsive website. I am trying to do a break point of max-width of 480px, but Google Chrome does not allow me to resize the window below 500px. Is there a way to do this?
For this you need to inspect(ctrl+shift+i) your html and click on the highlighted icon as shown here:
I'm using wordpress and I have my own built table on some page.
This table is showing some info for mobile users and more info for desktop users (because of space).
I'm using css rule
media only screen and (max-device-width:
to show the correct info for mobile users (i'm using display: none to hide some parts).
Everything works great but, when I click on my mobile browser to view as desktop, it does show as desktop the whole website expect my table which remains the same as mobile (with hidden parts).
What can i do to recognize this situation?
Thanks
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.
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