I’m having some trouble with my website, and I can’t get around it.
I’m trying to have my home page fixed, not scrollable. Which is currently working on desktops but not on mobiles. I checked the margins, everything seems fine.
Even though my code is as follow, for this specific page:
html, body {
height: 100vh;
margin: 0;
overflow: hidden;
}
I can’t get this straight. Any help would be highly appreciated.
The website is http://92-blue.com
Thanks!
Try not using 100 vh , on the mobile version. 100 vh displays the entire screen vertically for any device. When you are viewing it with the 100vh it will take into account the entire phone screen that is why it is scroll able, it gets moved down because of the url bar.
Related
I'm facing an issue with the remote participant of Twilio video call container width.
I need to control both of views when it come to the mobile and the desktop, but the result is keeps showing as like the attached image.
I've tried to pass to the Video.connect(token, {video: {width: 300, height: 300}}) but it's also not working.
Also when I'm trying to rotate the mobile into a landscape mood it working as expected like the desktop participant view, could any one please help me with that ?
Also those screenshots describe what I'm saying, portrait mood
Landscape mood
I've fixed my issue with adding a static height to the video element itself and adding an object-fit: contain to it.
I'm rendering a list of cards that each display some data along with three rows that allow the user to navigate to a specific, expanded section of that card.
For some reason, Safari seems to be rendering the three navigation rows for each card, but they are white and transparent. I know they're rendered because I can still click on the space where the row would be and the navigation works as expected. It's just invisible.
This problem is not happening when using Chrome. It only happens on Safari: both on my desktop in the browser and when running Safari on iOS. There are no errors in the console.
Another strange puzzle piece is that when I inspect the element's in Safari they appear on the screen! Here is a link to a video I took to show the behavior.
Any ideas???
In case anyone stumbles upon this, I took Jay's advice and started trimming CSS. Eventually I realized that the "update rows" had both display: "flex" and position: "relative" set. Once I removed position: "relative," which wasn't doing anything in the first place but must have been added by mistake, Safari rendered it perfectly.
TLDR: For Safari, display: "flex" and position: "relative" on the same div created rendering issues.
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 can't seem to get the Vimeo video on this page to be responsive. I've tried lots of different code that's worked for other people, but not on this page. Can anyone help??? Here is the page: http://give.brighamandwomens.org/stories/entry/stepping-strong
Currently you have width: 550px which is the reason why its not responsive. You need to add width: 100%; on the .ss_video class for it to adjust to screen size.