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()
Related
So,
I have a project using React & tailwindCSS, and I'm building a platform using a custom CMS. The problem that I'm facing is the following:
Im showing different screen size options on the CMS and you can press on different screen sizes to view your content in lets say on a mobile screen.
Since the CMS editor is not in an iframe changing the width of the parent element to 1300px or 400px is not causing the elements inside to change to tailwinds responsive design, since the viewport is still the exact same on the DOM.
Now I've read about CSS container queries, but since I'm using tailwindCSS it would be rather painful to start editing that. Is there any way to manipulate the DOM within and tell to the editor div.element that its viewport is only ex. 1400px.
And yes, iframe would be a viable option.
Thanks in advance!
.screen--desktop {
max-width: 1440px;
width: 100%;
}
.screen--mobile {
max-width: 360px;
width: 100%;
}
<html>
<body>
<div class="container">
<!-- PAGE CONTENT wv is 100 -->
<div class="editor screen--desktop">
<!-- FRAMED CONTENT wv needs to be 50 -->
<div class="container">
<!-- Container #media max width needs to listen to the parent div's width only -->
<!-- Here would be element1 -->
</div>
</div>
</div>
</body>
</html>
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 have a simple html code where I have a left menu. I want to scroll content on click of menu within the same page. Also I don't want to scroll menu.
The problem is, I am using AngularJS so compiler is confused between routing and segment logic.
Here is my menu:
<div class="container">
<div style="float: left;width:150px;">
<ul class="list-group">
<li class="list-group-item">overview</li>
<li class="list-group-item">Clinical features</li>
<li class="list-group-item">Diagnosis</li>
<li class="list-group-item">Testing laboratories</li>
<li class="list-group-item">Result interpretation</li>
</ul>
</div>
<div class="col-md-10" id="clinical">
<div class="row">
<div class="col-md-2">Result interpretation</div>
<div class="col-md-10">
<p style="text-align: right;">Back To Top</p>
</div>
</div>
<hr>
<p>Hey this is just to test.</p>
</div>
</div>
This is not a problem specific to AngularJS or anything else. It's just a tiny CSS problem:
You're aligning your menu using float: left, which will cause it to appear on the left border but it won't follow you down when scrolling (as you've noticed).
The solution is pretty simple, just attach your menu in a different way. There are many different ways to do this, also depending on whether you're using any JavaScript library (like Bootstrap), but the most simple approach would be pinning the menu using CSS:
.menubar {
/* A fixed alignment will ignore scroll bar positions */
position: fixed;
/* Stretch the bar by forcing offsets and a width */
top: 0;
left: 0;
bottom: 0;
width: 150px;
}
Last but not least you'll have to move your content so it's not hidden by the menu bar (which would otherwise overlap):
.content {
padding-left: 150px; /* of course this could use positioning as well */
}
You can try the whole thing in this jsFiddle.
From your question it's not clear whether you're also looking for soft scrolling, but for that you'll most likely want some additional JavaScript library - or you could just use some library that provides everything for you (including menu bar CSS etc.), like Bootstrap or UI Kit.
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
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...
}