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>
Related
This is my code:
#media screen and (max-width: 480px) {
header {
background-color: blue;
}
}
On mobile, my main header (Header Dark Small > Group > Row) stays the default background color while a different header (Header Dark Small > Spacer) does change blue.
html:
<div class="wp-site-blocks">
<header class="wp-block-template-part">
<div class="wp-container-8 wp-elements-7 wp-block-group alignfull has-foreground-color has-background-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-bottom:0px">
<div class="wp-container-6 wp-block-group alignfull" style="padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px">...</div>
<header class="alignwide wp-block-template-part"></header>
</div>
<div class="wp-block-spacer" style="height:66px" aria-hidden="true" class="wp-block-spacer"></div>
</header>
Changing the code on chrome, I found something I don't understand:
.wp-site-blocks > * {
background-color: blue;
}
That doesn't affect main header. But when I move up and change:
.wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align="full"] > .wp-block-group, .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
padding-left: var(--wp--custom--spacing--outer);
padding-right: var(--wp--custom--spacing--outer);
background-color: red;
}
That does change the main header's background color.
Without knowing what you html looks like i can only hazard a guess. But it looks like maybe you are using a third party to style things such as bootstrap. Have you tried
#media screen and (max-width: 480px) {
header {
background-color: blue !important;
}
}
or specifying a more strict selector such as
#media screen and (max-width: 480px) {
div.wp-site-blocks header.wp-block-template-part {
background-color: blue !important;
}
}
Try styling by specifying the classes you have in each header.
e.g.
header .wp-block-template-part {}
If it doesn't work try to use !important in your CSS properties because as I see they are wordpress classes
I used Google Chrome's inspect element to find, copy, and paste the relevant style.css code, and that solved my issue.
I have the follow html in Angular2.
<div class="col-xs-12 col-lg-8" >
<p style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
In my view, the text is aligned at the left (as I wanted). How can I say that when is for col-xs-12 it has to be centred?
Thank you.
The best approach for this would be to create a specific class for you container and only use media queries to modify the text position on mobile.
Here's the general idea following the BEM CSS naming convention:
<style type="text/css">
.thing {
... some styles
}
.thing__title {
text-align: center;
}
// tablets start at 768px width
#media (max-width: 767px) {
.thing {
... some mobile styles
}
.thing__title {
text-align: left;
}
}
</style>
<div class="thing col-xs-12 col-lg-8">
<p class="thing__title">... some text</p>
</div>
No need to increase the loading time of your site by adding jQuery to add styles to an element.
Bad idea to target modifier classes from component libraries. Especially your grid as you might removing that or the class name could be deprecated in later versions leaving your site vulnerable.
Can you use jquery?
$('.col-xs-12').css('text-align','center');
There is a good explanation of Bootstrap 3 and 4 Media Queries here at Bootstrap 3 breakpoints and media queries.
Bootstrap provides a great deal of flexibility to your project, but from minute details such as text justification between breakpoints, you will need to add a media query to your own CSS and apply the styles as desired.
So you might try something like this:
<div class="teacher-info col-xs-12 col-lg-8" >
<p class="ta-xs-left" style="font-size: 30px">
{{ teacher.personalInfo.name }}<br/>{{ teacher.personalInfo.surname }}
</p>
</div>
<style>
// Default to center the paragraph to center
.teacher-info p {
text-align:center;
}
// Large devices (desktops, 992px and up)
#media (min-width: 992px) {
// When the screen is larger than a tablet, left align the text
.ta-xs-left {
text-align:left;
}
}
</style>
Edit
In line with martinsoender's answer, I agree you shouldn't target modifier classes, and should add your own classes. This edit is to show how I would do that.
Essentially, I would add a class to the parent to denote what holds (teacher-info), then give the element I want to modify a class. In this case I create a class that looks similar to a bootstrap class. ta-xs-left ({text-align}-{Xtra-Small}-{Alignment}), then it can be reused wherever you need it.
I'm trying to make my wordpress blog responsive for mobile devices. I was able to customize homepage in style.css, but I'm having some problems with single post page.
The problem is: I have three columns and I want to remove right and left sidebars. But they are not id like on homepage, but classes.
Single post page has one id (#postcolumn) with 3 classes: .leftsidebar, .postzone and .rightsidebar. How do I remove .leftsidebar and .rightsidebar?
Here is my code for homepage, which is working great...
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer {
display:none
}
}
If I understand your question correctly, your HTML markup for your single post page looks something like the following:
<div id="postcolumn">
<div class="leftsidebar">
// something
</div>
<div class="postzone">
// something
</div>
<div class="rightsidebar">
// something
</div>
</div>
Applying the same logic as your home page, the CSS would look like:
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer, #postcolumn .leftsidebar, #postcolumn .rightsidebar {
display:none
}
}
tried to find a solution but didn't find a similar case!!
in order to prevent adding a class name for each page, i would love t use a generic class name just like bellow:
<div id="news">
<div class="news column">content 1</div>
<div class="news column">content 2</div>
...
</div>
#news .news {
float: left;
width: 50%;
}
#media only screen and (max-width: 767px) {
.column {
clear: both;
width: 100%;
}
}
the default css are not overridden, and the 2 solution i came up with are:
1- use !important, but i'm not a big fan!
2- use the exact class name as in the original css which is "#news .news"
Do you please have something else in mind that can solve this issue??
Thank a lot in advance
In CSS an #ID is more important than a class. Therefore here your class rules will not override the ID ones even though you declare them after.
You can fix your whole problem just by taking note of that.
This is a very important thing in CSS.
#media screen and (max-width: 767px) {
#news .column {
float: none;
clear: both;
width: 100%;
}
}
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?