I am designing an app that works on the desktop, tablets and phones.
I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.
I have other responsive elements working correctly, but the following html & CSS are not working:
HTML
<div id="storagePage" data-role="page" data-theme="a">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
<h2>Header 1</h2>
<p>Content here</p>
</div>
</div>
CSS
#media all{
.storage_devices {data-inset: "true";}
}
#media (max-device-width: 520px) and (orientation:portrait) {
.storage_devices {data-inset: "false";}
}
I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.
Thanks
I have used
#media all and (max-width: 650px) {
.storage_devices {data-inset: "false"}
}
You can change the width, then add the orientation to fit your needs.
Related
My desktop version of my website is perfect, and runs exactly how it should, however, on mobile. I've been having Issues
Issue 1
When I uploaded the files to the hosting server, the logo was enormous, and threw everything off balance
Image was throwing everything off balance i.e. Huge Navbar, menu button not aligned to the left
I then resolved this issue with the following Code in my CSS
#media only screen and (min-width: 200px) and (max-width: 670px) {
.site-branding img {
max-width:320px;
max-height:56px;
}
.main-header {height:80px;}
}
#media only screen and (min-width: 670px) and (max-width: 1023px) {
.site-branding img {
max-width:640px;
max-height:118px;
}
.main-header {height:140px;}
}
Issue 2
After implementing this, the Navbar shrunk, but so did the logo, and changing the values in my CSS did not change the logo size to an appropriate one. It just stayed the same size
Issue 2 Image
Issue 3
This change also affected my Products page, by extending the navbar length on the mobile version, extending the width of the navbar, while keeping all of the other content to it's original alignment
Issue 3 Image
Conclusion
I'd like to know how to keep the logo and the menu bar aligned on the same line, while increasing the size of the logo for the mobile version of the site.
I also do not know what is causing the issue on the products page, and I have no idea how to resolve that issue.
Thank you
Please check Below code I replace Some Html also I added a comment
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<!-- <div class="site-branding" img src="img/Logo.png" > --> <!-- This is not a right way to put HTML -->
<div class="site-branding"> <!-- I Removed img src="img/Logo.png" -->
<img src="https://logodownload.org/wp-content/uploads/2019/07/mini-logo.png" style="width:100%; height: auto;" /> <!-- Here I changed width 100%; and Height auto -->
</div>
</a>
And also add this css and You can change max-width as per your logo size
#mainNav .navbar-brand {
max-width: 120px;
}
Maybe add display:flex to common parent
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I have a FlipClock.js on a page which displays perfectly in all devices and browsers except iPhone.
On an iPhone (4, 4S, 5, 6) it fills the scrolling tabs with the number like the image below.
Has anybody come across this and perhaps can suggest a link to look at. There has been hours of trial an error now with no luck. Thanks!
The relevant HTML for the clock is:
<div class="up">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
I have targeted the .min class with fixed font sizes, but no difference. It only does this on iPhones but not in the iPhone simulator in Chrome inspect. Thanks for any help!
I solved this problem for myself by changing the font's size after a certain width.
#media screen and (max-width: 448px) {
.flip-clock-wrapper ul li a div div.inn {
font-size: 36px !important;
}
}
I have a <div> like this:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="slider.html"></iframe>
</div>
But when I decrease the screen size to small or medium, I will get white-space beneath the <div>.
Like This:
How can I have a dynamic height for this <div> to avoid the white-space?
You need using javascript to discover the dynamic height.
We have some functions in this links:
make iframe height dynamic based on content inside- JQUERY/Javascript
and call when the browser resize.
use media query like and add it to custom css
this is just a sample
#media (min-width: 992px) and (max-width: 1199px) {
.visible-md-block {
display: block !important;
}
I am using bootstrap, but the question is relevant to any responsive framework
I have a responsive page that looks (in a simplistic way) like this
<div class="wrap">
<div class="row page">
<div class="col-xs-12 col-md-6">
some stuff
</div>
<div class="col-xs-12 col-md-6">
some other stuff
</div>
</div>
</div>
I want to use this layout but to have the scope of the responsiveness be on some parent div (.wrap in this case) and not on the window, meaning if the parent div is at same specific sizes, force the responsive breakpoints to be in effect.
So this way, I can place this 'template' anywhere in the page and the results will be different according the wrap size and not on the screen/window size
Is there a way to do this? Or am I in outer space?
I think there is now way to check for the containers div width (using CSS), but yes you can try checking for the browser size and add/remove some class width which can give similar results.
#media (max-width: 768px){
.wrap{
width:1170px
}
}
#media (min-width: 767px){
.wrap{
width:767px
}
}
Or even better, you can use jQuery. var $widthOfWrap = $('.wrap').width()
I'm new to the Foundation Framework and just started using it. I'm creating a responsive design using Foundation Grid.
I've created desktop layout Grid with 2x4 (rows, column) grid.
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<div class="large-3 small-6 columns">
<img src="http://placehold.it/250x250&text=Thumbnail" />
<h6 class="panel">Description</h6>
</div>
<!-- End Thumbnails -->
</div>
</div>
Now, I want is two columns layout for Tablet, and 1 column layout for Mobile. By default grid resizes columns to fill the empty space but I want columns of fixed-size.
one solution I can think of is updating the DOM hierarchy based on #media queries using javascript. But I want a better solution, if possible using CSS.
Any help will be appreciated.
If you're using Foundation 4.3+, you can download an additional stylesheet that enables a medium grid in addition to the small and large ones that you're currently using. While this feature is technically listed as experimental, it's set to become standard with the release of Foundation 5 on November 21st.
Using the #media and certain screen widths (in pixels), you can specify max and min widths so the div will remain fluid, but not go off screen or go smaller than you allow.
You will need to specify widths for most common devices...
eg.
#media screen and (max-width: 980px) {
#your id {max-width:99%; min-width:75%;}
.image class {width:975px; height:450px;}
}
#media screen and (max-width: 650px) {
#your id {max-width:99%; min-width:75%;}
.image class {width:648px; height:290px;}
}
#media screen and (max-width: 480px) {
and so on...
}
#media screen and (max-width: 320px) {
and so on...
}
media screen and (max-width: 240px) {
and lastly...
}