I am creating a website with Wordpress.
I need to make a ImageMap plugin responsive. The only solution is to make it scrollable on Mobile devices. Because if image is made resposive with width:100%; and overflow-x:scroll; its also scrollable on Dekstop.
I tried also with: #media screen and (min-width:360px) and (max-width: 480px). Thought maybe there was problems in this code, so searched and tried every answer from stackoverflow.com, didn't helped. My Site
Made a ticket for that plugin, but I need fast answer, client is waiting.
How to achieve scrolling in mobile only, while dekstop responsive using CSS?
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow-x:scroll;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.container {
position:relative;
width:100%;
overflow-x:scroll;
}
}
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.imp-wrap{
min-width:100%; min-height:100%; width:auto; height:auto;
}
.container{
position:relative;
width:100%;
padding:0;
margin:0;
}
.container .row {
margin:0;
}
css works top down and something further down will over wright something higher in the page. So what you have is
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
overflow-x:scroll;
}
#image-map-pro-3521{
overflow-x:hidden;
}
so whatever happens overflow-x will always be hidden as it is not surrounded by an conditional statement and is further down the page. So to fix it either put the #media stuff at the bottom of the css or put a conditional statement around the general stuff. The better option is to rearrange the css unless you expect browsers who cant process #media tags.
side note: why are you concerned about the min width? dose anything different happen under 360px wide? if not then you dont need the min width statement, this should save a little bit of bandwidth and help the page load a tiny bit faster.
Related
I am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?
Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}
The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.
Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.
body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}
You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}
To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.
I have picked up development on a site using Visual Composer in a Wordpress theme (Jupiter). On most pages there is a full width row with an image that maxes out at 1600px wide. The client doesnt like how small the photo shrinks as the browser window/mobile reposnse gets smaller.
http://spiderman.ephronsystems.com/full-width-tester/
I added this CSS in a mediaquery:
div.vc_single_image-wrapper.vc_box_border_grey {overflow:hidden;}
img.vc_single_image-img.attachment-full {height: 200px;width:auto;max-width:none;margin:0 auto;}
This seems to work pretty well but I would rather the image was centered in the browser window. Anyone know how to fix this? I can also replace the VC coding with straight html.
add margin-left: 50%; and transform:translateX(-50%); on the img at the following
#media (max-width: 736px) {
.wpb_single_image img {
height: 200px;
width:auto;
max-width:none;
margin:0 auto;
margin-left: 50%;
transform:translateX(-50%);
}
}
query
I am making a webpage. I am the first to admit my CSS skills are not the best.
There is blank space appearing to the right side of the mobile version page. (www.perfectshinesmile.com)
Your container is not picking up margin:0 auto in mobile css.
So replace from main.css at line number 2638
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 0;
}
to
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
Hope this will help :)
your .container has set max-width property to 360px. Change it to max-width: none. But I reccomend you to your bootsrap grid for web layout, you would avoid such a problems. I can see in your code that a lot of elements has specific width value, resulting to broken layout on mobile devices.
In your case you have a second scroll bar!
or you do this
::-webkit-scrollbar {display:none !important;}
Or you do this
#media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Don't use the overflow:scroll; ever unless you need it! especially in phones port!
I have a header in my web page with white background color. it works properly in PC monitors. but in mobile phones, the result is something like this:
http://uupload.ir/files/j0ki_screen_shot_2015-10-10_at_19.44.32.png
when I scroll the page to left, half of my header doesn't exist.
http://uupload.ir/files/o0j3_screen_shot_2015-10-10_at_19.50.36.png
my code is here:
<style type="text/css">
.my-header-box{
width:100%;
background-color:#fff;
border-bottom:1px solid #4ba028;
}
.my-header-wrapper{
width:100%;min-width:940px;max-width:1280px;
height:200px;
/*border:1px solid #ff0000;*/
margin:0 auto;
}
.my-logo img{
max-width:300px;
max-height:90px;
}
</style>
<div class="my-header-box">
<div class="my-header-wrapper">
</div>
</div>
You've fixed a width - min-width for .my-header-wrapper, which is why you are seeing it that way on smaller devices.
.my-header-wrapper{
width:100%;
max-width:1280px;
height:200px;
margin:0 auto;
}
Otherwise, use media query for devices with 939px or less pixels devices.
#media only screen and (max-device-width: 936px){
.my-header-wrapper{
min-width: 100%;
}
}
In your css min-width:940px is the main reason it`s happening.
If you want to make the website more responsive when viewing it in mobile devices try using css media queries
See a simple tutorial here
W3Schools tutorial
And if you really want deep understanding then this will be major help:
CSS-tricks - Media Queries
CSS tricks is going to be real helpful for learning anything around CSS
My footer is absolutely fine on a normal screen size but I want it to become invisible when I shrink the screen after a certain height.Any ideas how to do it without using javascript?My HTML and CSS snippets are as follows:
HTML:
<footer class="footer">
About
</footer>
CSS:
.footer{
position: fixed;
bottom: 0;
margin: 0;
padding: 10px;
width: 100%;
box-shadow: 0 0 3px white;
color:white;
}
jsFiddle Demo
Use a max height media query on your page in order to hide the footer. Note that this is compatible in almost all browsers, except IE8-.
html for demo
<div id="footer">Footer</div>
css
#media (max-height:150px) {
#footer{
display:none;
}
}
Use this:
#media screen and (max-width: 500px) {
.footer {
display: none;
}
}
DEMO and Source
Try a media query in your css document like so:
media screen and (max-height:700px) {
.footer {
display:none;
}
}
Media queries take a lot of different arguments, i.e. min-height, min and max width, etc. Mozilla dev covers the operators with great examples.