I am trying to make a dropdown sidebar menu.
please see the image attached
https://i.stack.imgur.com/nsvzQ.png
I need the section to be open on a desktop view and close in mobile view.
what is the best way to achieve this?
I am trying to use the code in the following link.
https://codepen.io/gregsaxton/pen/eoWGxL
<ul class="m-d expand-list">
<li data-md-content="200">
<label name="tab" for="tab1" tabindex="-1" class="tab_lab" role="tab">Product Description</label>
<input type="checkbox" checked class="tab" id="tab1" tabindex="0" />
<span class="open-close-icon">
<i class="fas fa-plus"></i>
<i class="fas fa-minus"></i>
</span>
<div class="content">
Welcome to Brackets, a modern open-source code editor that understands web design. It's a lightweight,
yet powerful, code editor that blends visual tools into the editor so you get the right amount of help
when you want it.
</div>
</li>
<li data-md-content="300">
<label name="tab" for="tab2" tabindex="-1" class="tab_lab" role="tab">Specifications</label>
<input type="checkbox" class="tab" id="tab2" tabindex="0" />
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span>
<div class="content">
<em>Brackets is a different type of editor.</em>
Brackets has some unique features like Quick Edit, Live Preview and others that you may not find in other
editors. Brackets is written in JavaScript, HTML and CSS. That means that most of you using Brackets
have the skills necessary to modify and extend the editor. In fact, we use Brackets every day to build
Brackets. To learn more about how to use the key features, read on.
</div>
</li>
<li data-md-content="600">
<label name="tab" for="tab3" tabindex="-1" class="tab_lab" role="tab">Shipping & Returns</label>
<input type="checkbox" class="tab" id="tab3" tabindex="0" />
<span class="open-close-icon"><i class="fas fa-plus"></i><i class="fas fa-minus"></i></span>
<div class="content">
<h3>Projects in Brackets</h3>
<p>
In order to edit your own code using Brackets, you can just open the folder containing your files.
Brackets treats the currently open folder as a "project"; features like Code Hints, Live Preview and
Quick Edit only use files within the currently open folder.
</p>
<samp>
Once you're ready to get out of this sample project and edit your own code, you can use the dropdown
in the left sidebar to switch folders. Right now, the dropdown says "Getting Started" - that's the
folder containing the file you're looking at right now. Click on the dropdown and choose "Open Folder…"
to open your own folder.
You can also use the dropdown later to switch back to folders you've opened previously, including this
sample project.
</samp>
</div>
</li>
By using two ways you can do this
using javascript to detect device (desktop / mobile) then with a if condition u can close or open the section onload.
using css media query to detect screen size and open or close the section onload.
example : for option 2
/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
*/
#media (min-width: 1281px) {
/* CSS */
}
/*
##Device = Laptops, Desktops
##Screen = B/w 1025px to 1280px
*/
#media (min-width: 1025px) and (max-width: 1280px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (portrait)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) {
/* CSS */
}
/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
*/
#media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
/* CSS */
}
/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
*/
#media (min-width: 481px) and (max-width: 767px) {
/* CSS */
}
/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
*/
#media (min-width: 320px) and (max-width: 480px) {
/* CSS */
}
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 need to change the image 1 to image 2 in a wordpress theme on mobile size.
the image is inline in the theme, so I can't replace it with background image and use media queries to get this done.
From:
<a class="logo">
<img src="image1.jpg">
</a>
Change to:
<a class="logo">
<img src="image2.jpg">
</a>
Any way I can do this?
I prefer CSS
You can use the following -
.logo {
content:url("image2.jpg");
}
Using breakpoints (depends on what CSS processor you are using like Stylus, SASS)
#media only screen and (min-width: 600px) {
.logo{
content:url("image2.jpg");
}
}
#media only screen and (min-width: 768px) {
.logo{
content:url("image2.jpg");
}
}
For desk top version,(when life was simpler) normal page text gets displayed fine. but for tablet and mobile version text overflows.
I already am using
h4#lineForUrl a:first-of-type {
max-width:500px
display:inline-block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
but this gets only effected in desktop size page.
For my web users can post anything,and along with the post title gets displayed in the front page. When the title is too long I used the above code to stop overflow. but when I decrease the size of the screen, overflow prevented title is still too long for it.
How do I achieve my goal here?
<h4 id="lineForUrl">
<a href="{% url 'post' post.slug %}"
target="_blank"
style="margin-left: 15px; text-decoration:none;">
<img src="{{post.thumbnail}}"
class="img-rounded"
alt="☺"
height="75"
width="75"/>
<span id="title-font">
{{ post.title }}
</span>
</a>
Change the size of the font:
You can use media queries to set the stile for narrow screens;
#media screen and (min-width: 480px) {
#lineForUrl a {
font-size: smaller; /* or font-size:10px; */
}
}
Or even easier, just use a font size relative to window (viewport-percentage lenghts):
#lineForUrl a {
font-size: 0.5vw;
}
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...
}
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.