on my site's (www.adventwatches.com) mobile responsive theme, I would like to hide certain blocks when viewed on mobile. How do I go about doing it?
Thanks in advance.
you can hide the block by CSS
/* Smartphones (portrait and landscape) -------*/
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.your-block-class{
display: none;
visibility: hidden;
}
}
to get more information about media query refer this link
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
I was trying to figure out how to show the labels of v-stepper on mobile devices since they are hidden by default.
Add to scss or css overrides:
#media only screen and (max-width: 959px) {
.v-stepper:not(.v-stepper--vertical) .v-stepper__label {
display: flex !important;
}
}
My email template has two media queries. I have a call to action button as an image. When the code is rendered in Outlook the image-button in the larger media query looks fine, but the image widthxheight in the smaller media query does not change when viewing the rendered email in Outlook It does render fine for other mail clients, OS).The native size of the image is 2x that of the declarations in the CSS.
I've tried -
max-width in the CSS.
width attribute in the HTML (but this applies across all media queries).
CSS -
#media screen {
.image-responsive {
width: 320px;
height: 68px;
}
#media (max-width: 520px) {
.image-responsive {
width: 260px;
height: 56px;
max-width: 260px;
}
HTML -
<p style="text-align: right;margin: 0;padding-top: 20px;">
<a href="#" style="color:#fff; text-decoration: none;">
<img src="URL/images/btn-securepayment-2x.png" alt="Secure Payment" class="image-responsive">
</a>
</p>
The max-width element is unsupported in Outlook.
Outlook uses Word for rendering message bodies, so you need to follow strict rules if you want your markup to be rendered correctly. You may find the list supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following articles:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
Outlook 2007+ unfortunately doesn't media queries (although older ones did). As Eugene mentioned, Outlook 2007 changed their rendering engine from IE to MS Word which causes rendering issues for very commonly used CSS as well.
Below is an example of how media queries can be used to change elements in an email when viewed on different screen sizes.
#media screen and (max-width: 520px) {
p {
text-align: left !important;
margin: 10px !important;
padding: 0px !important;
background-color: #000000 !important;
}
}
<p style="text-align: right;margin: 0;padding-top: 20px;color:#ffffff; background-color:#ff0000;">
wow this is fun
</p>
Lastly, here is a resource from Campaign Monitor which gives in details which CSS works on which email client.
This is my website:https://pcshiraz.ir
My carousel image height is not responsive, I can not find solution.
Hi you can add this Stylesheet i've tried in your website with inspect element it's worked!
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) and (max-width: 991px) {
.carousel-inner {
height: 400px;
}
.carousel-item, .carousel-item img {
height: 400px;
width:100%;
}
}
/* Extra small devices (phones, 600px and down) */
#media only screen and (max-width: 767px) {
.carousel-inner {
height: 160px;
}
.carousel-item, .carousel-item img {
height: 160px;
width:100%
}
}
Here is Result
You can't handle the problem with carousel-item active . You can try col-md-6 or col-sm-12
instead of carousel-item active. In this way height will be autosized.
You need to use
.carousel {
min-height: auto;
}
or try using
.carousel {
min-height: 100%;
}
Try using viewheight,
.carousel{
min-height: 100vh;
height: 100vh;
}
Viewheight takes % of screen view. 50vh means it will take up 50% of your display. 100vh will take up 100% of your display.
Just add width: 100% on your slide <img /> tag. If you are using bootstrap use w-100 class or smth. But be aware that SEO will kick your ass for shrinking images like that, you might want to use several images and show them dependent on screen size.
I'm building a site that's 1450px width.
There's a logo that's flushed right of the 1450px max-width at the top of the site, followed by a 1450px-width image underneath.
I want to keep it this way, but when resizing the screen for tablet or mobile, the logo remains flushed all the way to the right.
I want to add about 20px padding to the right of the logo, so it's not flushed to the edge on mobile and tablet screens, but make it aligned with the 1450px image (and flushed to edge of image) for desktop screens.
How do I do this?
You could try this code below:
<style>
#media only screen and (max-width: 800px) { ... }
</style>
This will apply the css in the { ... } to devices that have a screen width of a maximum of 800x.
You could set .logo padding-right:20px; and it will only apply to smaller screens.
You need to use media query view port in css
in CSS you need these tags
#media screen and (max-width: 480px) {
Inside here you add what you want changed for this screen
}
EG:
a {
padding: 20px; // Original
}
#media screen and (max-width: 480px) {
a {
padding: 10px; // only applies to screens up to 480 px view port
}
Best of luck do some more research there is lot on this Google for " Responsive Design "
Addition:
You can have as many view-ports or SCREENS in one CSS as you want, so you can change properties on any size you need. :)
thanks for your help.
Here's the code I used and it works now. (I needed margin, not padding, btw, because the padding was actually squishing the width of the image).
img.logo
{
width: 200px;
float: right;
padding-top: 20px;
padding-bottom: 20px;
}
#media all and (max-width: 1450px) {
img.logo
{
margin-right:20px;
}
}
When check it in Opera Mobile Emulator and on devices, it appears, that styles for wvgaPort apply only at 599px, then for 800 - at 1200, for 1024 at 1533. Why does it happen? And what is a better why to define these media rules?
/* Media */
$wvgaPort: 400px
$wvgaLand: 800px
$wsvgaPort: 600px
$wsvgaLand: 1024px
$desktop: 1280px
=apply-to($media)
#if $media == smartPort
#media only screen and (min-device-width: $wvgaPort) and (max-device-width: $wsvgaPort) and (orientation: portrait)
#content
#else if $media == smartLand
#media only screen and (min-device-width: $wvgaLand) and (max-device-width: $wsvgaLand) and (orientation: landscape)
#content
#else if $media == tabPort
#media only screen and (min-device-width: $wsvgaPort + 1) and (max-device-width: $desktop) and (orientation: portrait)
#content
#else if $media == tabLand
#media only screen and (min-device-width: $wsvgaLand + 1) and (max-device-width: $desktop) and (orientation: landscape)
#content
html, body
+apply-to(smartPort)
font-size: 87.5% !important
#header
+apply-to(smartPort)
background: red
color: #000
+apply-to(smartLand)
background: blue
Here is the output CSS for what you've written.
#media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (orientation: portrait) {
html, body {
font-size: 87.5% !important;
}
}
#media only screen and (min-device-width: 400px) and (max-device-width: 600px) and (orientation: portrait) {
#header {
background: red;
color: black;
}
}
#media only screen and (min-device-width: 800px) and (max-device-width: 1024px) and (orientation: landscape) {
#header {
background: blue;
}
}
Your #header will only, and I do mean only, have the styles background: red; color: black between 400px and 600px when in portrait and will only, and again I mean only, have the style background: blue; applied to it between 800px and 1024px in landscape. You've got some very very stringent media queries there. By specifying min-width, max-width, and orientation for each media query (not to mention the media type), you are locking your styles to only applying at those specific places, and nowhere else. This is very unsustainable and leads to the confused styling you're seeing.
If I were you, I'd take an entirely different approach to this. You should be starting with your content first, choosing breakpoint when your design breaks (not where devices live), and be much more liberal with when a media query can apply. I've done quite a few presentations on this, my Responsive Web Design with Sass+Compass should help you get a better understanding of what tools are already available to you for building responsively with Sass (and how to choose breakpoints), and Style Prototyping will show you a set of tools/techniques/reasons why and how to design content first.