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...
}
Related
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 */
}
I have an HTML website in which I am trying to hide a div containing images in mobile view.
#media screen and (max-width: 600px) {
#kingg { display: none !important; }
}
<div id="kingg" class="grid-uniform section-four" >
<div class="container">
<div class="main-title">
<div class="hometab-heading box-heading">ABOUT US</div>
<div class="title-sep"></div>
</div>
<div class="grid__item ">
<div class="grid__item wide--two-thirds post-large--two-thirds large--two-thirds">
<p>Anvi Jewellers founded by <b>Lavanya Ghulekar</b> in 2017 is a by-product of the passion for creativity of a home maker. Our vision is to build trust with high ethical standards, fair pricing and added value to our customers. We have made it our mission to strive every day to earn the confidence and trust of our clients by meeting and exceeding expectations of quality, service, and unsurpassed value. We expertise in all types of designer light-weight kundan, antique, c-zet, pearl jewellery etc. We make gold ornaments in 20 carat and 22 carat. Anvi Jewellers was founded with a refreshing and courageous objective to make beautiful jewellery accessible, affordable and forever. After 2 years of happy clients, Anvi Jewellers has finally launched online. Anvi provides our clients with more than they imagined and less than they anticipated.</p>
<div class="invisible-medium"></div>
<div style="margin-top:52px;" class="grid__item ">
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="see" src="images\a1.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seep" src="images\a11.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seel" src="images\a3.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
</div>
</div>
Now the problem is, it is working in localhost but when I uploaded it to server it is not hiding the div. Here is my website link website.
Can anyone tell me what could be the problem, please?
After going through your source code online, this is what you actually have, inline:
<style>
#media screen and (max-width: 600px) {
#kingg img { display: none !important; }
}
</style>
This is working as expected, hiding the image in that div.
So the code you posted is bound to work, as it doesn't seem to have any syntax errors or anything.
So i would say to make sure you are uploading the file you are editing or edit the file in the server directly.
use correct id or class. Use the code below to hide text.
.grid__item p:nth-child(1) {
display: none;
}
So I have an episerver block for form. On desktop and large screens, the form is displayed with an image to its right. On smaller screens the image is hidden.
When the image is hidden, I would like to make the form wider to fill up the missing space. The image does not have its own div class. It is the background image of the containing div.
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="container pb-5 pt-3 fixed-bg gatedbg" style="background-image: url(#Url.ContentUrl(Model.CurrentBlock.Image))">
<div class="row">
<div class="#(!ContentReference.IsNullOrEmpty(Model.CurrentBlock.Image) ? "col-sm-7 col-md-8" : "col-sm-12 col-md-12")">
<div class="whitepaper">
</div>
</div>
</div>
</div>
</div>
</div>
I have also modified the above so that when a form is not included in the page through the EPIserver editor that the row should be full width by default.
My css for .gatedbg
#media (max-width: 960px) {
.gatedbg {
background-image: none !important;
}
}
Is there a method either in EPIserver or ASP.Net/MVC to detect when the background image is hidden from view in the browser?
If I understood correctly, I cannot use javascript in this razor page because it is server side code?
These pb-5 pt-3 classes presumably are part of some grid system, that is responsible for the column widths? Do the 960px correspond to one of the responsive breakpoints used by that system?
If so, you probably just need to set different classes (that make the form take full width, and hide the “image” column completely);
otherwise you might need to overwrite the width coming from those classes explicitly in your stylesheet.
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 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.