I'm trying to add iframe to Wordpress pages. I want to display iframe A for desktop users and iframe B for mobile users, because some elements just don't work with mobile devices and at the same time I don't want to lose functionality for the desktop version. I'm pretty new to coding, so detailed explanation how to solve this would be very welcome.
One way of doing this is using CSS media queries. #media(max-width: 540px) contains styles that will only apply on screens of width at most 540px (and you can change the number to whatever suits your needs).
And, I imagine you could do this too to the actual page pointed at by the iframe, so that you don't need two iframes in the first place. I.e. apply media queries directly to the page that has buttons to show/hide on mobile.
/* mobile (you can change 540px to whatever breakpoint you like) */
#media(max-width: 540px) {
.desktop {
display: none;
}
.mobile {
display: block;
border: 1px solid red;
}
}
/* desktop */
#media(min-width: 541px) {
.desktop {
display: block;
border: 1px solid cyan;
}
.mobile {
display: none;
}
}
<iframe class="desktop"></iframe>
<iframe class="mobile"></iframe>
Related
My spans with hover work on a tablet (my iPad) and desktop computer. However, on my phone the CSS styling disappears, while I understand that hover effects don't really "work" on phones/touch screens but part of the CSS is hiding the span when not hovered over.
HTML:
<section id="proj1">
<a href="EJ.html">
<img id="c" src="img/rjcover.jpeg">
</a>
<span id="one">
Envisioning Justice
<br>
<br>
May 2020
</span>
</section>
CSS:
span {
display: none;
position: absolute;
font-size: 10px;
padding: 5px;
text-transform: uppercase;
z-index: 1;
font-family: 'Darker Grotesque', sans-serif;
font-size: 25px;
background-color: #FAD714;
color: white;
width: 75%;
margin-top: -190px;
}
#proj1:hover #one {
display: block;
}
#proj2:hover #two {
display: block;
}
#proj3:hover #three {
display: block;
}
#proj4:hover #four {
display: block;
}
http://iam.colum.edu/students/riley.jakusik/designbyriley/
that is the link to it live.
You should always take into consideration what will create the best user-experience. If you are setting display:none on your span element and then displaying that element on hover you are creating a situation for users who are on a device that does not support the hover state that will not be the best experience for them. One possible solution would be to use a hover media query. This way you can specify styling that will apply to users that are on a device that supports that feature, and if not you can specify a fallback for users that are on a device that does not:
#media (hover: hover) {
#one {
display: none;
}
#proj1:hover #one {
display: block;
}
}
The CSS #supports rule will also be a useful tool to familiarize yourself with.
EDIT: And thank you to #SandeshSapkota for pointing out that hover state is still supported in many mobile devices, but I think that it is useful to familiarize yourself with the aforementioned hover media query as it is a useful tool in many situations. A better approach to your issue may be to instead implement a media query that tests for viewport width, and if it is smaller than say 641px, which is the value that Foundation uses to detect mobile devices then just show the span element by default:
#media (max-width: 641px) {
#one {
display: block;
}
This query means that if the device in question has a viewport width at a maximum of 641px then apply the styles.
Is there a way to name your media queries?
#media ("AddImageBorderQuery") {
#Cats {
border: 5px solid red;
box-sizing: border-box;
display: block;
}
}
There's mention of something similar here.
My use case is different than defining classes and switching to them.
If you want more details I have completely different designs hidden behind different queries (single page application). Then in those designs I want to have specific states and I want to name the query so I can switch to those states. There can be large number of changes so I want to use nested query groups as a way to organize them.
I'm doing this manually now using a dictionary and code but naming media queries would simplify things.
#media ("page1") {
#media ("AddImageBorderQuery") {
#Cats {
border: 5px solid red;
display: block;
}
}
}
#media ("page2") {
#media ("ShowContactForm") {
#ContactForm {
display: block;
}
}
}
window.showMediaQuery("ShowContactForm");
One approach to load media queries dynamically is by having a style tag with id, e.g. <style id="app-dynamic-media-query">, which content you can fill/replace later on the fly. You can access that style tag using document.getElementById.
I have a table in which there are three columns: Name, Type and Status. The HTML code of it is:
<div class="dependents">
<tbody><tr>
<td class="cell1">Name</td>
<td class="cell2">Type</td>
<td class="cell3">Status</td>
<td class="cell4 last"></td>
</tr>
</tbody>
</div>
The desktop view for this table is:
My task is to make a mobile view of the same table(between Dependents and Edit sections) of the same page in the following way:
I tried making the mobile view of the page by using the following CSS code:
#media screen and (max-width: 768px)
{
.dependents .table.title td {
font-weight: bold;
display: inline-block;
width:100%;
}
}
The CSS code(not complete) of the desktop view is:
.dependents .table.title td {
border-bottom: 1px solid #CCC;
font-weight: bold;
}
As shown in the mobile view, it is clearly depicted that the border-bottom in between Name, Type, and Status should not be present in the mobile view in comparison to the desktop view, it is present.
In order to achieve that I have removed the border-bottom line from the mobile CSS code. After removing the border-bottom line, I am still able to see the border bottom section in the mobile view because I believe it is taking the border-bottom of the desktop view. I am not sure how to get rid of it.
The "desktop view" is not within a media query. It always applies.
The "mobile view" supplements it, it doesn't replace it.
Since you don't override the border-bottom property with a different value, the existing rule applies.
Everything you code will apply to "desktop view".
#media screen and (max-width: 768px) {}
#media will over-ride the "desktop view" css code IF it satisfies the '#media screen' condition.
You have to re-declare the css for both cases if you want to play safe.
e.g.
.table.title.td {
border-bottom: 1px solid #CCC;
}
Then you override it with
#media screen and (max-width: 768px) {
.table.title.td {
border-bottom: none;
}
}
so basically you hv 2 pieces of code:
.table.title.td {
border-bottom: 1px solid #CCC;
}
#media screen and (max-width: 768px) {
.table.title.td {
border-bottom: none;
}
}
Important Note: declare your "mobile view" css at the end of your css file (as comparative to your normal "desktop view" css code), that way to make sure the "desktop view" code come first and only be over-ridden if needed.
Maybe this will help you:
.dependents .table.title td {
border-bottom: none;
font-weight: bold;
}
or if that is not working try this
.dependents .table.title td {
border-bottom: none!important;
}
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
I have tried for over 3 weeks now with different implementations trying to get the right section to not display, and have the left section display at full width. Given that my research shows there is no easy or streamlined way to quickly render Print views without reviewing the print preview, I am asking for some help to figure this out.
the print media css that is not working is this:
#gc {
width: 100%;
}
#asideTrack {
/* width: 100%;*/
display: none;
}
.asideTrack {
/* width: 100%;*/
display: none;
}
.slideAside {
/* width: 100%;*/
display: none;
}
#slideAside {
display:none
}
Any suggestions?
In CSS lower rule overwrites the top if they have the same priority (depending on selector)
You write your common css not in #media block, and it is lower then your #media print block, so it overwrites your #media print styles. For example, it is cause why in print preview your left block has width 74% (because this rule is lower then rule of #media print block where you say it is 100%).
I hope it is helpful.
Solutions
In your css file you may place media print block to the end of file.
Add !important directives to some rules in media print block. ie:
p {
color: red !important;
}
Place your special css for screen in media screen block.