I have a flexible newsletter - 3 steps:
bigger than > 660 px
smaller < 600 px
smaller < 350 px
everything works excluding link on images
I have a CSS entry that looks like this:
http://mantykora.cleoni.com/~newsletter/2017/lak/Lak_EN.htm
#media only screen and (max-width: 660px) {
table.container { width: 600px !important; }
td.logo img { display:none; }
td.logo { background:#fff url(http://mantykora.cleoni.com/~newsletter/2017/lak/images/logo65.jpg) no-repeat 10px 10px; height: 60px;}
td.logo a {??????????????link to site???????????}
is it possible linking image on media screnn?
Use two elements, one to be shown on narrow viewports and one to be shown on wide viewports.
CSS:
.only-narrow { display: block; }
.only-wide { display: none; }
#media screen and (min-width: 600px) {
.only-narrow { display: none; }
.only-wide { display: block; }
}
HTML:
<div class="only-narrow" ><a href="..." ><img src="..." ></a></div>
<div class="only-wide" ><img src="..." ></div>
Related
I have a footer container. There are some menu items and two paddels(left and right) to scroll left and right the menu. There are one description text and one log link.
Now, if the screen size is more than 768px then all these three divs( menu, description text, log link) are in same line. Which is fine. But, if i choose screen size less than <768px then as per my application design will be like this below.
< Menu >
Description text Log link
Here is the screenshot for less than <768 px.
Now, description text and log link aren't in same line . Because of repair log width, menu inner wrapper is hided behind the screen. How to solve this?
Here is my css style for less than (768 px screen)
#media only screen and (min-width: 414px) and (max-width: 767px) {
.footerContainer {
height: 72px;
flex-direction: column;
.menu_item_outer_wrapper {
width: 390px !important;
height: 100%;
.paddles {
display: block;
.left-paddle {
transform: translate(-1%, -45%);
}
.right-paddle {
right:0;
transform: translate(10%, -45%);
}
}
.menu_item_inner_wrapper {
margin-left: 36px;
}
}
.footer-desc_log-section {
width: 100%;
.footer__description {
width: 60%;
margin-left: 8px;
}
.footer__description,
.footer__audit-log {
line-height: 32px;
}
}
.footer-desc_log-section {
width: 100% !important;
height: 100%;
}
}
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
div{
display:inline;
}
}
.div2{
float:right;
}
<body>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<body/>
You can check out this code just add display:inline; in the CSS of the div.
I am pretty new to HTML and CSS.
Right now I have a 4 column layout that has 4 images all next to each other on a desktop view and when in mobile, all the icons are stacked on top of one another. Here is an image to explain.
DESKTOP VIEW
I am not allowed to post more than one link, so I will use x's to explain.
This is desktop view using x's:
X X X X
This is the current mobile view using x's"
X
X
X
X
(all the images / icons are stacked on one another)
This is what I am trying to achieve using CSS:
X X
X X
(images are grouped together on one line)
I saw a post using float left and float right attributes targeted for small screen sizes. Not sure if that would work. I would love some help.
/* 1 column: 320px */
.autowide {
margin: 0 auto;
width: 94%;
}
/* 2 columns: 330px */
#media only screen and (min-width: 330px) {
.hot-icon-group {
float: left;
margin-right: 2.564102564102564%;
width: 48.717948717948715%;
}
.hot-icon-group:nth-child(2n+0) {
margin-right: 0;
}
}
/* 3 columns: 768px */
#media only screen and (min-width: 768px) {
.autowide .hot-icon-group {
width: 31.623931623931625%;
}
.autowide .hot-icon-group:nth-child(2n+0) {
margin-right: 2.564102564102564%;
}
.autowide .hot-icon-group:nth-child(3n+0) {
margin-right: 0;
}
}
/* 4 columns: 992px and up */
#media only screen and (min-width: 992px) {
.autowide .hot-icon-group {
width: 23.076923076923077%;
}
.autowide .hot-icon-group:nth-child(3n+0) {
margin-right: 2.564102564102564%;
}
.autowide .hot-icon-group:nth-child(4n+0) {
margin-right: 0;
}
}
<div class="autowide">
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
<img src="https://beaverbuilder.appletreeprinting.ca/highoctane/wp-content/uploads/2017/05/super-hero-icon.png" alt="" />
</div>
You can use media queries to apply specific CSS based on device or browser dimensions.
Replace the p tag with your divs.
p {
text-align: center;
}
.container {
max-width: 65rem;
margin: 2rem auto;
}
.grid-size {
display: flex;
flex-wrap: wrap;
}
.size1of4 {
width: 25%;
}
.size1of4:nth-of-type(even) {
background-color: green;
}
.size1of4:nth-of-type(odd) {
background-color: yellow;
}
#media all and (max-width: 768px) {
.size1of4{
width: 50%;
}
}
#media all and (max-width: 480px) {
.size1of4{
width: 100%;
}
}
<div class="container">
<div class="grid-size">
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
<div class="size1of4"><p>Content</p></div>
</div>
</div>
I am trying to create an email that shows one image only when viewed on mobile and one image only when viewed on desktop on desktop.
I have gotten the desktop image to correctly disappear when viewed on mobile, but I am unsure how to get the same result for the reverse.
Any help would be appreciated.
The CSS I am using is as follows:
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
And the HTML
<img class="mobile-show" border="0" height="50" src="images/logo.svg" style="display: block;" width="250">
<img class="mobile-hide" border="0" height="50" src="images/logo.svg" style="display: inline;" width="100">
Need to setup a second media screen:
#media screen and (min-width: 600px) {
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
}
First of all add this meta tag for mobile deivce support if its missing like below.
<meta name="viewport" content="width=device-width, initial-scale=1">
Then using media queries you can achieve the thing you want.
#media screen and (max-width: 600px) {
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
#media screen and (max-width: 600px) {
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
.mobile-hide {
display: block;
}
.mobile-show {
display: none;
}
You have to hide your mobile image always except in the mobile. So add a display:none to your image. Then your image will not appear no desktop and your CSS with medi will make it appear.
<img class="mobileShow" border="0" height="50" src="images/logo.svg" style="display: none;" width="250">
.desk-hide {
display: none !important;
}
.desk-show {
display: block !important;
}
#media screen and (max-width: 600px) {
.img-max {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
.max-width {
max-width: 100% !important;
}
.mobile-wrapper {
width: 85% !important;
max-width: 85% !important;
}
.mobile-padding {
padding-left: 5% !important;
padding-right: 5% !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
.mobile-hide {
display: none !important;
}
.mobile-show {
display: block !important;
}
}
<img class="mobile-show desk-hide" border="0" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="display: block;">
<img class="mobile-hide desk-show" border="0" src="https://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" style="display: inline;" />
You've created two classes for handling the mobile size behavior. Now, you have to do the same for desktop size. If you want this to work as intended, place the desktop size rules above the #media. So in the default screen size, the desktop rules are being applied, but when screen became less than 600px, it will apply the #media rules.
You can use picture tag which can use many image sources, example:
<picture>
<source srcset="images/logo-mobile.png" media="(max-width: 720px)">
<img src="images/logo.png">
</picture>
Are tablets mobile in your opinion or do you just want mobile phones? With todays phones and tablets it's unreliable to trust a simple media query like:
#media screen and (max-width: 600px) { }
Best way in my opinion is to use Javascript or PHP ( this PHP class is very interesting github.com/serbanghita/Mobile-detect ) to detect what device is being used and then apply the right style.
Its light, reliable and gives you all the data over what devices do your users have and it's always handy to know not just the device but also resolution, pixel depth, etc. & have even different image files for different users.
I want to make an 100% full page, within 4 images on each row. But if you resize the window you'll get 3 images than 2 images till there is 1 left. After research I become at #media to fill the full page without getting any blank spaces. Now i've made this jsfiddle but if you resize the results window you will see blank spaces who are not filled. What am I doing wrong?
#media only screen and (min-width : 354px) {
/* Smartphone view: 1 tile */
.image{
width: 100% }
https://jsfiddle.net/8hfLkb3k/
The image always must fill both width's, if the width is 50% for 2 both images must fill it in for 50%.
Thanks.
I recommend using max-widths for your media queries, but you don't have to do this, as long as what you do gives you the intended and correct result.
In my working example I've chosen to set the one-image container for 25% unless something changes like the viewport width.
At 1024, 767 and 600 I've chosen the 1/3 and 1/2 sizes and finally the 100% width.
I expect this is what you mean, but feel free to adapt this code as you see fit, especially to match the media query viewport attributes to what you desire.
* {
box-sizing: border-box;
}
.one-image {
width: 25%;
float: left;
border: 1px solid red;
}
.one-image img {
width: 100%;
border: 1px solid blue;
display: block;
}
#media screen and (max-width: 1068px) {
.one-image {
width: 33.33%;
}
}
#media screen and (max-width: 767px) {
.one-image {
width: 50%;
}
}
#media screen and (max-width: 600px) {
.one-image {
width: 100%;
}
}
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
<div class="one-image">
<img src="http://placehold.it/200x200">
</div>
Your images (<img> elements) are not expanding to the full width of the .image containers because you're missing this rule, which you can add to your CSS:
.image img {
width: 100%;
}
Here's your example code updated to show this working:
.image img {
width: 100%;
}
.f_left {
float: left;
}
#media only screen and (min-width: 354px) {
/* Smartphone view: 1 tile */
.image {
width: 100%;
}
}
#media only screen and (min-width: 708px) {
/* Smartphone view: 2 tile */
.image {
width: 50%;
}
}
#media only screen and (min-width: 1062px) {
/* Small desktop / ipad view: 3 tiles */
.image {
width: 33.3%;
}
}
#media only screen and (min-width: 1417px) {
/* Medium desktop: 4 tiles */
.image {
width: 25%;
}
}
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
<div class="image f_left">
<img src="http://www.devual.nl/project/gmsbase/img/cover.png" />
</div>
I want to edit the margin-top of a text in the mobile device. I have come this far but I know there is something crazy in the code:
.Foljoss {
padding-left: 18px;
background: #fff;
}
#media screen and
(max-width: 768px; margin-top:17px)
It is the last part in which I dont get it. How can I adjust the top margin for the <div class="Foljoss"> on the mobile version? Notice that the #media screen-part is not correct.
You need to wrap the css inside a selector inside the media query.
#media screen and (max-width: 768px) {
.Foljoss {
margin-top: 17px;
}
}
body {
background-color: lightgreen;
}
.show-on-mobile {
display: none;
}
#media screen and (max-width: 568px) {
.show-on-mobile {
display: block;
}
.hide-on-mobile {
display: none;
}
body {
background-color: lightblue;
}
}
<div class="show-on-mobile">Only visible when width is <= 568px</div>
<div class="hide-on-mobile">Disappears when screen width > 568px</div>
/* 767 is max for mobile */
#media screen and (max-width: 767px) {
.Foljoss {
margin-top: 17px;
}
}