I'm wondering if there's a quick solution to killing my fancybox calls at resolutions below 480px for mobile within my media queries. So that items that used the fancybox, just won't use it below certain resolutions and will be linked directly to the .html page (I'm using iFrame fancyboxs).
I've just tried display: none; on the fancybox class I'm using at the certain viewports and no success.
.fancybox-iframe { display: none; }
Media queries are finicky things. Some CSS properties can be use, while some can't. Display is one of those properties, I believe.
I find it best to set a max-width to 0px.
Related
trying to figure out how to change the onclick on a div when in mobile view media in react,
Currently i have a modal onClick using a Hook on a div and want to remove it and attach another one that opens a new website like in mobile view just to the div.
using #media screen (max-width: 768px)
I'm using styled components also if that helps
Cheers
There is a trick that you can use to access the breakpoints in javascript. Same can work in your scenario. I had used this approach before but for a javascript project. Below is a link for the same,
https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
The whole idea is to make use of :before or :after pseudo selectors.
I have just started using angular-gridster library and I am wondering how I can embed an html page in a widget. I mean, how can I 'point' towards an html resource which loads its data separately etc. etc.
For example, I would like to embed a chart of some sort in a widget with the purpose of creating a dashboard.
Thanks!
You can put an iframe element inside of a Gridster widget. From experience, my recommendation is to detect when the user begins resizing a widget with an embedded iframe, and temporarily set display: none on the iframe during the resize, otherwise the browser will have big problems. Once the resize is done, reveal the iframe again.
I have actually solved it using this answer: Widgets with different dynamic content (angular-gridster)
Slightly more complicated than just using an iframe, yes, but then again you have a better modularity - each widget will have its own directive and all that. Thank you emackey!
I want to make my theme so it will fit all browsers and mobile devices and be fully responsive, how can i do this im using forum software MyBB my forum link is: http://deepblood.com/
Help me please i need this so i can official launch my site.
If anybody would assist me with this issue i would be most grateful :)
Forum: http://deepblood.com/
Software: MyBB
How can i make the theme responsive for all browsers and devices?
Let me go from simple to complex.
Use free responsive mybb theme.
MyResponisve
Use paid responsive mybb themes
Aadya Responsive Mybb Professional Theme
MyBBPro
Customizing a non-responsive theme. (most probably, you are interested in this).
Use Chrome Inspect Elements or Firefox Firebug to see the width of div elements and change their fixed value in pixels to percent denoted by % on css. I recommend you to create a custom css file to put on the template. eg.
#media (max-width: 768px) {
.warpper {
width: 100%;
}
}
The above css code only targets browser/device width of 768px and below. To read more, follow this article.
You can also use Responsive Mobile Menu. Then you have to check and make each page responsive until you find no component that is not responsive.
On my website I am using Bootstrap 3.2 for responsive design and I am trying to embed Adsense responsive adds there. I am having problems with orientation changes: I would expect that adds would resize on such event, but it doesn't happen. Is such feature ready for Adsense? Some old post on Adsense blog says:
The new ad code is responsive on initial page load only. Subsequent
changes to the ad size, such as a screen orientation change, will not
cause a new ad to be displayed. We know that this is an important
feature for many of you and we’re currently working to address this.
But current documentation doesn't mention such issue. Does this resizing work?
So it turns out the blog post I was quoting is about advanced mode (mode which allows specifying exact ad size via CSS). Even though more than a year ago Google recognized the problem, the advanced ads are not resizing automatically when screen orientation chages.
The AdSense documentation states that responsive ads resize with orientation changes. That's true, but only for default (not advanced ads).
The advanced mode allows specifying exact ad sizes with #media CSS rules which is nice. But for me it was possible to achieve almost same thing by wrapping default responsive ads with div container. The container's size can also be specified by CSS #media rules, so I have same result as with advanced ads + I get benefit of ads resizing when screen orientation changes.
I'm mainly shooting here, cause it's not a lot of information here to be fair, but:
What happens if you add style="display:block;" and also data-format="auto" to your ads?
If this is not going to help, I guess media queries are your friend in this matter.
Ads from AdSense, even responsive ones, are loaded based on your screen size and orientation one time - when the webpage is loaded. Of course, you can try to reload part of page where your ad is served, but then you will have a problems with inner iframe elements (AdSense don't like to be in iframes).
Try using this - https://github.com/mattnish/rad
I just used it in one of my projects and even though it says "outdated" it works perfectly.
The problem with adsense "responsive ads" is that it is responsive only on initial load.
Here is my take on this one. I used advanced mode with a responsive ad unit and put in the following media queries.
<style>
.myclass-responsive { width: 320px; height: 100px; }
#media (min-width: 768px) and (min-height: 768px) { .myclass-responsive { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- myclass-responsive -->
<ins class="adsbygoogle myclass-responsive"
style="display:inline-block"
data-ad-client="XXXX"
data-ad-slot="YYYY"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The point being that the ads in advanced mode are loaded based on the device viewport dimension but do NOT resize dynamically. The default smart resizing mode produced mixed results with my layout and would occasionally break it on dynamic resize. Using (min-width: 768px) and (min-height: 768px) in a Bootstrap layout with a responsive ad unit in advanced mode seems to fix any resizing issue I had (well on the 5 devices I tested at least). However you may get undersized ads for some devices but that the story about it ... you can't get it all.
I need to create a new application widget using bootstrap 3 and other web technologies like angular etc. I know that the new version of bootstrap is responsive. My understanding after reading the documentation is that the widget that I will create will automatically be responsive. I don't need to do anything special to make it responsive. However If I want to make it non-responsive then I need to make necessary changes to disable this functionality of bootstrap 3.
Can you please let me know that whether my understanding of Bootstrap in this regard is correct or not?
I think this will help you to understand more about Bootstrap.
You mentioned "widget that I will create will automatically be responsive". But if you not apply Bootstrap CSS rules in your widget, it will not be responsive even it in inside of Bootstrap template.
We have to apply Bootstrap CSS rules in our design to take effect and be responsive. If you do not want a particular element to be responsive, apply your own CSS rules or media queries on breaking points that you want...
Link for Bootstrap CSS http://getbootstrap.com/css/
Hope this will help you. Cheers! (='.'=)
This is all you need to do:
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
Bootstrap template with responsiveness disabled
We've applied these steps to an example. Read its source code to see the specific changes implemented.
Not Responsive Template: http://getbootstrap.com/examples/non-responsive/