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
Related
I am fairly new to coding and need some help. I have a bootstrap website where the slider does not re-size to mobile devices or tablet sizes.
The code in the CSS I have added are:
img{ max-width: 100%;}
iframe{ border: 0; width: 100%;}
and
what am i doing wrong?
.img{
width: ....;
height: ....;
}
#media all and (min-width:900px){
.img{
width:....;
height:....;
}
}
so this is css code. the first .img by itself is what it will look like on a phone for example, the # media tags is what you use to change the size of stuff when the screen size gets above the min-width size. I suggest using firefox as it has a nice responsive view so you can change the screen size to see what it will look like on a smaller screen
So, I want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
I am using the tinymce editor to allow users to create their own content. When they upload images they cause side scrolling when the output is viewed on mobile devices.
How can I shrink the content of the whole box where the images are to large?
I have tried using css media queries but as the images are set to a certain width they are still to large.
I have changed my css to this, but I am still having the same problem:
.coupon
{
min-height:202px;
background-color:#fff;
color:#000;
padding:2px;
text-align:left;
max-width:100%;
height: auto;
}
Please see example.Play the quiz and select random answers for the two questions to see the overscrolling image http://www.quizzerland.com/?q=bbv.php&desc=vvv
To have images use their natural width or the width given by the width= attribute on wide viewports and shrink them on narrow viewports you can use media queries, like this:
#media screen and (max-width: 640px) {
img {
height: auto;
max-width: 100%;
}
}
Replace 640px in accordance with the actual design. If you cannot trust your users at all then you may want to limit the max-width of images at all times, not only on narrow viewports; in this case, just get rid of the media query:
img {
height: auto;
max-width: 100%;
}
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.
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries