Apply directive to previously hidden content when shown - css

I have two divs on my page both with the same directive. One is called medium and one is called large.
<div class="mediumLayout">
<div ng-controller="PortfolioListCtrl" list-portfolios></div>
</div>
<div class="largeLayout">
<div ng-controller="PortfolioListCtrl" list-portfolios></div>
</div>
Using CSS I show or hide one or the other depending on the browser width:
.largeLayout {
display: none;
}
#media (min-width: 2000px) {
.largeLayout {
display: block;
}
.mediumLayout {
display: none;
}
}
When I resize my browser it shows the large but the content isn't rendered by Angular unless I trigger some other event.
Is there an easy way to trigger the controller to render when the display changes?

Related

Can i set Revolution slider for desktop and mobile separately?

I'm building a photography website in Wordpress and on the home page, I want to set a different slider for mobile and desktop as the given requirement. So how can I do that?
You can create two WordPress sliders, one for mobile, one for desktop.
After you have created two sliders, you can add the following code to your post or page. Please be sure to change the ID value in the code to that of your own sliders.
<div id="largescreen">
[wonderplugin_slider id="1"]
</div>
<div id="smallscreen">
[wonderplugin_slider id="2"]
</div>
Then you can add the following CSS code to your WordPress theme style.css file to show the small slider when the screen width is less than 640px:
#largescreen {
display: block;
}
#smallscreen {
display: none;
}
#media (max-width: 640px) {
#largescreen {
display: none;
}
#smallscreen {
display: block;
}
}

WordPress: How to style gallery shortcode into masonry layout?

I'm trying to make a masonry layout possible through using (placing this in the page content section):
[gallery size="large" link="file" columns="4" ids="1,2,3"]
Documentation: https://codex.wordpress.org/Gallery_Shortcode
But even though this is the desired effect:
This is what keeps happening:
Essentially, if there was some CSS or even javascript that could be added to transform the gallery to do this, would be fantastic.
My code at the moment, looks like this:
<div class="gallery-template">
the_content();
</div>
And my additional css is:
.gallery-template img{
max-width: 100%;
height: auto;
border: none !important;
}
.gallery-item{
width: 33% !important;
margin: 0;
margin-top: 0 !important;
}
This doesn't exactly do anything to solve the problem of when a new section of thirds starts, to get rid of the padding and margin between the "rows".
When the [gallery] shortcode mentioned above gets rendered, the way it's rendered in the DOM is like so:
<div class="gallery-template">
<div id="gallery-1" class="gallery">
<dl class="gallery-item">...</div>
<dl class="gallery-item">...</div>
<dl class="gallery-item">...</div>
// And so on..
</div>
</div>
And the CSS rendered in the DOM is:
#gallery-1 {
margin: auto;
}
#gallery-1 .gallery-item {
float: left;
text-align: center;
}
.gallery-item {
width: 33% !important;
margin: 0;
margin-top: 0 !important;
}
Has anyone implemented a solution for this sort of obstacle yet?
Also, I'm trying to refrain from using an external plugin.
This is, indeed, a css question. I would suggest checking out flexbox. Creating an entire solution for you will be a little tricky since you haven't posted your html, so if this exact code doesn't work, try editing your post to include some of it.
#gallery-1 {
display: flex;
flex-direction: column;
}
.gallery-item {
flex: 0 1 33%;
margin: 0;
margin-top: 0 !important;
}
OK! I was able to get this working. Here's my solution:
First, it was necessary to prohibit the gallery shortcode to inject external styles into the page. So in the funtions.php file, I added:
add_filter( 'use_default_gallery_style', '__return_false' );
Next, I took out the column specification in the shortcode tag I was incorporating in the page, like so:
[gallery size="large" link="file" ids="1,2,3"]
Rather than:
[gallery size="large" link="file" columns="4" ids="1,2,3"]
Lastly, I placed this CSS into my page (including the column-count):
.gallery-template{margin:auto; column-count:4;column-gap:0;}
.gallery-template img{max-width:100%;height:auto;border:none !important;}
.gallery-item{margin:0;display:inline-block;width:100%;width:100%;margin-top:0;}
EXTRA: If you are looking to make this responsive, simply add the #media tags where you want your preferred breakpoints, and place in the new number of columns, like so:
#media screen and (max-width:1200px) {
.gallery-template{column-count:3;}
}
#media screen and (max-width:772px) {
.gallery-template{column-count:2;}
}

CSS moving element from one div to another

I am wondering please what is the best way to move an element from one div to another in responsive design?
I have the current setup in my page:
<div class="container">
<div class="desktop"><h2>Hello I show on desktop</h2></div>
<div class="mobile"><h2>Hello I show on mobile</h2></div>
</div>
And then the relevant CSS media queries to either display the mobile or desk top version and it works...but is it the right way?
Try to design the page for mobile. Then add the stuff that's required for desktop. Share as much as possible and try not to duplicate content on the same page.
<div class="container">
<h2>Hello world!</h2>
<div class="desktop">
this is an extended block only visible on desktop
</div>
<p>
this text is visible from both
</p>
</div>
You can also try bootstrap http://getbootstrap.com - it does a lot - including dynamic resizing of images and columns. It's really worth trying - might save you a whole bunch of work.
There is no right or wrong way but the way you are doing it is perfectly suitable.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media all and (max-width:400px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
Personally I only use one div and make it responsive.
.desktop{
width:100%;
font-size:1em;
}
#media all and (max-width:400px){
.desktop{
font-size: 0.7em;
}
}
Yes, you are doing it right. Use media queries for the two different classes like below.
.mobile,
.desktop {
display: block;
}
#media (max-width: 768px) {
.desktop {
display: none;
}
}
#media (min-width: 768px) {
.mobile {
display: none;
}
}
<div class="container">
<div class="desktop">
<h2>Hello I show on desktop</h2>
</div>
<div class="mobile">
<h2>Hello I show on mobile</h2>
</div>
</div>

Media Queries - Should we always set a default value on original/parent stylesheet?

On a mobile-first design, after changing values with Media Queries, Are we supposed to set them back to their original values on the parent stylesheet? or will it be handled by the browser?
<div id="mobile">
<div class="box1">
<div class="box2">
...
</div>
stylesheet:
( default style for mobile goes here )
#media (min-width: 500px) {
.box1 {
float: right;
}
.box2 {
float: left;
}
}
#media (min-width: 700px) {
.mobile {
display: none;
}
}
like in this case, should I to set the display value to, for example block on the default stylesheet? and/or reset the float attributes respectively?
No, setting default values won't be required in this case.
HTML has default display property with value inline, but say we want default value as block then we might want to specify default values.

How to position a div differently for a specific page?

I have <div class="rightside"> on every page of my site. It positions a contact form on every page, then at 850 pixels wide screen (for responsive) it hides the contact form with display: none;
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
}
On the contact us page, I would like to make the contact form still available for this page only. How can I change on the contact us page, so the contact form is still available for devices below 850 on contact us but display: none; on every other page ?
UPDATE:
I wish to use the attributes from .rightside in my css. I have tried:
<div class="rightside" id="contactpage"> in contact page
in the media query for 850
.rightside #contactpage {
float: left;
}
try adding another css style to your code just after the existing one, like this:
<div class="rightside contact"></div>
#media only screen and (max-width : 850px) {
.rightside {
display: none;
}
.rightside.contact {
display: block;
float:right;
}
}
On your HTML, you can add an additional class to all the rightside divs that you want to disappear after a certain point, and then just use CSS selectors to remove these divs only. Change your HTML markup on all the responsive divs, so that instead of <div class = "rightside>, you have <div class = "rightside responsive">. This adds an extra class to the div that is called responsive, and from here you can just select the divs that have this class using .rightside.responsive instead of just .rightside on your media query.
UPDATE
The reason that the code that you recently updated does not work, is because you have a space between the #contactpage and .rightside. By having no space between the two selectors, you are selecting elements that are on the same level, and your code should work.

Resources