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
}
}
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 am attempting to add some print functionality to my page, but I am having an issue where when I print, it is printing as if it is mobile. How can I make it so that when someone hits print it prints the desktop version?
$('.print-btn').click(function(e) {
window.print();
});
.visible-desktop {
display:none;
}
#media only screen and (min-width:768px) {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="visible-desktop">Viewing from desktop</div>
<div class="visible-mobile">Viewing from mobile</div>
</div>
<a class="print-btn" href="#">Pring</a>
You can add an #media print rule at the bottom of your stylesheet:
#media print {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
only screen
This excludes print. If you want to include print, don't write that.
You should pick one state (probably desktop) and make it the "default", by moving that state outside media queries.
The other states should override the default state's properties in media queries.
I am setting up a custom header and footer for a client's site which you can view here:
http://gag5.rhinomarketinggroup.com/
The social media links float right just fine here...and on all pages. But for some reason on the 404 pages they do not float to the right. Very confused. Can't seem to find a reason why it would change on the 404 pages.
Example 404 page:
http://gag5.rhinomarketinggroup.com/404
clarifying images:
enter image description here
.et_pb_column.et_pb_column_1_2.et_pb_column_1 {
float: right;
}
On the normal page, you have the following CSS:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
Which is applied to .et_pb_gutters3 (The part where the LinkedIn icon is)
You also have:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column, .et_pb_gutters3.et_pb_row .et_pb_column {
margin-right: 5.5%;
}
Which is applied to .et_pb_column (The part where the logo is)
I'd suggest you add this code to the 404 pages as well.
UPDATE:
Though it seems as if this does not completely solve the problem. The easy way to fix this is to add float:right; to the .et_pb_column_1 (The second half, containing the LinkedIn icon)
Solution to Header:
Change <div class="et_pb_column et_pb_column_1_2 et_pb_column_1"> to <div class="et_pb_column et_pb_column_1_2 et_pb_column_1" style="float:right"> (Line no. 202)
Problem with Footer:
You have used et_pb_column_1_3 and et_pb_column_2_3 classes in 404 page, while you have used et_pb_column_1_2 classes in normal pages.
Solution to Footer:
Replace et_pb_column_1_3 and et_pb_column_2_3 classes with et_pb_column_1_2 in the footer. (Line no. 366 and 384)
You have this problem because of #media rule
if you inspect <div class="et_pb_column et_pb_column_1_2 et_pb_column_1">
you have apply following media rule on it:
#media (min-width: 981px)
.et_pb_gutters3 .et_pb_column_1_2, .et_pb_gutters3.et_pb_row .et_pb_column_1_2 {
width: 47.25%;
}
but on 404 page it is not applying #media rule
Solution: Apply #media rule on 404 page
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>
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.