Hello am having troubles to make this responsive mosaic, what I am trying to acomplish here is to keep the same order of the 7 images and if the screen is smaller make the mosaic full width but with their respective proportions in a mobile screen but maintaining the order.
this is my css:
#mosaic {
width: 100%;
background-color: aqua;
}
.largeImg, .smallImg {
/*display: inline-block;*/
float: left;
}
.largeImg {
/*width: 40%;*/
background-color: #165384;
}
.smallImg {
/*width: 60%;*/
background-color: #EF0808;
}
.col-wrap {
display: inline-block;
}
this is my demo: jsfiddle demo
Hope someone can help and thanks for reading.
You can achieve your desired functionality using media queries, the code below is specific for mobile devices, try it on;
#media all and (max-width: 658px) { // mobile devices
#mosaic {
display:block; // to have each musaic in one line
}
}
Related
I have a wordpress site dishingup.com and am having issues with the alignment on tablet and mobile
Here it is on mobile:
And here it is on tablet
I have tried adding the following CSS in WordPress Customize
#media only screen and (max-width: 767px) {
figure.alignleft, img.alignleft, figure.alignright, img.alignright {
float:none;
}
}
But feel I must be missing something. Ideally I just want the text to be below the image on mobile and tablet.
Thanks in advance.
The custom CSS code you added for desktop mode is affecting the elements on smaller devices and you need to override it:
Most likely, adding this to your CSS will help:
.list-category li {
display: flex;
}
#media(max-width: 767px) {
.list-category li {
flex-direction: column;
}
.list-category li > a {
margin: 0 auto;
}
.list-category li .custom-content {
width: auto;
margin: 20px;
padding-left: 0;
}
}
If you don't want the images centered, remove the margin:0 auto rule.
So I'm trying to make this website mobile friendly: coveartschildcare.com and all the header divs are overlapping and nothing I've tried seems to be working. This is the CSS I'm using:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
div#logo
{
float: left;
}
div#logo h1
{
font-size: 0.5em;
color: #777;
}
div#logo span
{
font-size: 1.4em;
color: #FFF;
}
div#header
{
background: url(../images/mobile-bg.jpg) no-repeat bottom center;
text-align: center;
float: left;
}
div#nav
{
z-index : 1;
float: left;
position: relative !important;
}
.container
{
float: left;
}
.clear {
clear: both;
}
}
I've tried making positions relative, absolute, floating left or none, auto width & height and nothing works. Any help would be greatly appreciated.
ok, what you are asking is to make the div tags smaller on your page so that they don't overlap?
to do that create a new rule like this one:
#media (max-width: 520px) {
div {
width: 50px;
}
body {
color: blue;
}
}
the max-width is the max-width that the browser will activate this on.
you can create two #media rules and change the second #media rule's max-width to equal a different number. the browser will activate the rule if the width is smaller than the max-width. when the screen size gets smaller than both of the #media rules it will run the smaller one
hope this helps...
I think, if you delte the position: absolute; on the #nav-wrapper{} it is no more overlapping.
I have a responsive video on my page and I've set to to adjust to a static background image when the display reaches below 767px width (for smartphones).
Problem is, that anything between 768px to 1199px (width) eg. on iPads, my video DIV container height does not respond to, causing a white margin below the video. Ideally the container should adjust from 266px - 347px (height) in parallel with the video height/width.
.videobg is my container and .videoheader is the video itself.
Here is the code:
.videobg {
margin:0;
padding:0;
width:100%;
height:100%;
position: static;
z-index: -100;
min-height: 250px;
max-height: 423px;
}
.videoheader {
margin:0;
padding:0;
width:100%;
height:100%;
}
#media (max-width: 767px) {
.videobg {
background: url('images/home/header.jpg') center center / cover no-repeat;
height:266px;
}
.videoheader {
display: none;
}
}
#media(max-width:768px){
.videobg {
height:266px;
}
}
#media (max-width: 884px) {
.videobg {
height:280px;
}
}
#media (max-width: 1000px) {
.videobg {
height:347px;
}
}
For this certain case it looks that solution will be:
.videobg {
font-size: 0px;
}
I strongly recommend using other scaling for responsive videos (e.g. like this) and, oh dear, so many media queries! :D
But, duh, if it works for you it's fine.
I have a vertical menu on my website which I want to make horizontal when I shrink the webpage, how can I achieve this?
I leave here the site:
Link
I am using WordPress to create this website if that helps
the only thing the menu has so far is this:
#menu_esquerda{
float: left;
}
#menu-o-menu{
list-style: none;
margin-top: 20px;
}
#menu-o-menu a{
color: white;
text-decoration: none;
font-family: Lato, Arial;
}
#menu-o-menu li{
padding-bottom: 10px;
}
Use media queries to target the css to specific devices.
In your case assuming that you want to make the menus horizontal when you resize the window and the window size is less that 980px, declare the styles to be applied for all the devices with width below 980px within the below declaration
#media screen and (max-width: 980px) {
// write the css here
}
To make the menu horizontal try this
#media screen and (max-width: 980px) {
#lateral{
float:none;
width:100%;
}
#desc_fantas p{
height:auto; // you have declared 100px height for this initially, i just changed it to reduce the height when the menu is horizontal. Change it as you need.
}
#menu-o-menu{
text-align:center;
}
#menu-o-menu li{
display:inline-block;
}
}
Use conditionals. At a certain width, the CSS would change and convert the menu into a horizontal one. Something like this. THIS code is no way related to your website. That is up to you to do!
#media screen and (min-width: 600px) {
#header ul {
display: block;
margin-right: 1.02048%; /* 10/980 */
}
#header form {
display: none;
}
#footer p {
display: block;
line-height: 30px;
color: #4e4e4e;
text-align: left;
float: left;
width: 16.3265%; /* 160/980 */
min-width: 120px;
margin-left: 1.0204%; /* 10/980 */
}
}
#media screen and (min-width: 1000px) {
#header form {
display: block;
}
#header ul a {
display: block;
float: left;
width: 74px;
}
#header div > a.mobile {
display: none;
}
}
you used max-width and max-height.
In such a situation, instead of width and max-width to the browser in a small window, you can improve the way it handles.
You've got a div#lateral on there that has a width="300px" that is confining your whole sidebar area. So, you've only got that much room to work with horizontally.
setting the display="inline-block" on your li elems works, but you'll need to dramatically adjust your font-size and margins, etc to make it look nice.
all i am new here and i was trying to make responsive header image and to some extent i have done with using this "dislay none "technique
#img1{
display:block;
}
#img2{
display:none;
}
#media screen and (max-width:480px){
#img1{
display:none;
}
#img2{
display:block;
}
}
so this is the technique that i am using but it doesn't maintain the qualtiy what i think so can you please tell to make a header image responsive that is shorter than this method
thanks in advance
Why not use background images?
.header {
background: url(img1.jpg);
width: 100%;
height: 200px;
}
#media screen and (min-width: 768px) {
.header {
background: url(img2.jpg);
}
}