I have problem with my Wordpress blog,
in mobile I can't open the post in single page because the post in main page doesn't response with any click or touch on phone,
the div class for post on main page is entry-content.
this mobile styling codes
/* =Mobile Styling
----------------------------------------------- */
#media (max-width: 768px) {
.pull-right {
float: none !important;
}
.pull-left {
float: none !important;
}
.site-info, .copyright {
text-align: right;
}
.footer-nav.nav, .copyright {
float: none;
}
.site-content {
width: 100%;
}
.flex-caption {
display: none;
}
.navbar > .container .navbar-brand {
margin: 0;
}
.navbar-default .navbar-nav > li > a {
line-height: 20px;
padding: 15px 10px;
}
#footer-area {
display: none;
}
.entry-content {
margin-left: 0;
display: inline;
}
Try setting entry-content position:relative and z-index high (like 999) and see what happens. Also try removing display:inline or change do display:block.
Hope it helps
Related
I am trying to change the text from "Menu" to "Close Menu" when Menu is open. I have no idea how to do it.
This is my HTML:
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span> Menu
</label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
This is my CSS:
/* MENU */
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
the easiest way to do this is to actually remove the word "Menu" from the actually html and add two data attributes to the menu that you want to toggle between
so your label would look like this
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>☰</span></label>
next you will have to toggle the content based on whether your checkbox is checked or not with 2 styles like this
/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
content: attr(data-closed);
}
here is the complete code that you can test
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
content: "Menu Hide";
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black;
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
/* toggle the menu text */
input#responsive-nav[type=checkbox]:checked ~ label.responsive-nav-label:after{
content: attr(data-open);
}
input#responsive-nav[type=checkbox] ~ label.responsive-nav-label:after{
content: attr(data-closed);
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" data-closed=" Menu" data-open=" Close Menu"><span>☰</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
There is a similar question to yours.
if you are insistent to replace text content with css, you can visit the link below.
How to change content on hover
otherwise it's highly recommended to use javascript instead of css to replace or toggle content.
$(document).on("click","#menu-label",function(){
var $this = $(this);
if ($this.text() === "Menu"){
$this.text("Close")
}else {
$this.text("Menu")
}
});
/* hide the checkbox and the label */
input#responsive-nav,
label.responsive-nav-label {
display: none;
font-size: 15pt;
}
/* declarations for the not-responsove-menu */
nav {
width: 220px; /* Darüber laesst sich die breite des Aufklappmenue steuern */
margin-left: -10px;
background: black
}
nav ul {
padding: 0px;
margin-left: -10px;
margin-top: 43px;
}
nav a {
display: block;
background: #FFF;
text-decoration: none;
color: white;
font-size: 15pt;
}
nav ul li {
position: relative;
float: left;
list-style: none;
color: #FFF;
transition: 0.5s;
}
/* Declarations for the responsive menu 1680px */
#media screen and (max-width: 15360px) {
* {
font-size: 15pt;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 0px;
background: black;
cursor: pointer;
color: #fff;
}
nav {
position: absolute;
top: -9999px;
padding: 0px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
nav a:after {
display: none;
}
nav li {
float: none !important;
width: 100% !important;
border-bottom: none !important;
}
nav li a {
margin-bottom: 10px !important;
padding: 10px 20px !important;
background: black;
}
nav ul li:hover {
background: none;
}
nav ul li a:hover {
background: black;
color: #11BEE0
}
}
/* END OF MENU */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label" ><span>☰</span> <span id="menu-label">Menu</span></label>
<nav>
<ul>
<li>Download Apps</li>
<li>Download Manuals</li>
</ul>
</nav>
Since you are already using the checkbox hack for your menu, we can use that to show and hide text inside the label, too.
Inside the label, we add two <span>'s with the according text:
<label for="responsive-nav" class="responsive-nav-label">
<span>☰</span>
<span class="open">Close Menu</span>
<span class="closed">Menu</span>
</label>
As we want "Close Menu" to initially be hidden, we add
.open {
display: none
}
to our CSS.
When the checkbox is checked (meaning the menu is visible), just hide "menu" and display "Close Menu":
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .closed {
display: none;
}
input#responsive-nav[type=checkbox]:checked ~ .responsive-nav-label > .open {
display: inline;
}
Here's a jsfiddle with the working code.
Here is a strange one. At least for me anyway. I have an HTML page that is being generated by PHP with a style sheet (css.php) linked in. My original plan was to be able to save the attributes for this file in a MySQL database and then load values into the file using PHP variables at each page load. I was talked out of this because it would use to many server resources to parse this file on each page load. I decided to rewrite this file each time changes were made to the database. Now that I have written a file with preferences.php and changed its name to css.css it no longer sees the correct file. It only sees a one line file that I wrote while initially setting up my code. Now that I have a full file it still uses the one-liner that no longer exists. If I change back to my .php file that is in the same folder (the only difference between the two is the file extension) everything works correctly? Where have I gone wrong? I'm sure it's something simple that I can't see.
here is index.html that is loading the css file
<!doctype html>
<html lang= "en">
<head>
<title>Rogers Enterprises</title>
<link rel= "icon" type= "image/png" href= "images/bc2.JPG">
<meta charset="utf-8">
<link rel="stylesheet" href= "css/css.css" >
<script src="js/js.js"></script>
</head>
and here is my css.css
body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}
This is preferences.php that generates the CSS
$file = fopen("../css/css.css", "w");
$txt = 'body { background: linear-gradient(to top right, #ffff00 0%, #000000 100%);
color: #ddd8e4; }
h1 { color: red;
text-align: center; }
div { /*border: 1px solid black; */
padding: 1%;
float: left; }
p.content { text-indent: 2%; }
p.content::first-letter { font-size: 200%;
font-weight: bold;
color: black }
#logo { width: 98%; }
.box { width: 10%; }
#links { width: 100%; }
#desc { width: 86%; }
#footer { width: 98%;
background-color: #104e01;
display: block;
text-align: center; }
.footer { width: 31.33%; }
#login {opacity: 0.2; }
#login-form { max-width: 100%;
display: inline-block;
margin-left: auto;
margin-right: auto;
text-align: left; }
input { border-radius: 5px;
max-width: 25vw; }
img { max-width: 100%;
max-height: 100%; }
/* styles for smart phone */
#media only screen and (min-width: 302px) and (max-width: 640px) {
.box{ position: relative;
width: 98%; } /* desired width */
.box:before{ content: "";
display: block;
padding-top: 16.66666666%; } /*What you want the height to be in relation to the width */
.box-content{ position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
#desc { width: 98%; }
}
#media only screen and (min-width: 0px) and (max-width: 370px) {
#remember_me_label { font-size: 4vw; }
}
/* styles for tablet */
#media only screen and (min-width: 768px) and (max-width: 980px) { /* styles for tablet */
}';
fwrite($file, $txt);
fclose($file);
My directory structure looks like this
rogersproperties
|___index.html
|___css
| |___css.php
| |___css.css
|___php
|___preferences.php
I'm using wordpress and the theme is Newspaper. I want to center the copyrights text but I don't know how. I have checked the theme panel settings and there's no options to edit that.
Theme panel pic:
I have gone through some answers in the web and they suggested adding codes in the editor but I'm not sure if it's the footer.php or style.css. If the latter, I managed to find the part regarding sub-footer:
Sub Footer
*/
.td-sub-footer-container {
background-color: #0d0d0d;
color: #ccc;
font-size: 12px;
font-family: 'Open Sans', arial, sans-serif;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container {
text-align: center;
padding: 6px 0;
}
}
.td-sub-footer-copy {
line-height: 18px;
margin-top: 8px;
margin-bottom: 8px;
}
/* Sub Footer Menu */
.td-sub-footer-container .td-sub-footer-menu {
float: right;
/* responsive portrait phone */
}
#media (max-width: 767px) {
.td-sub-footer-container .td-sub-footer-menu {
float: none;
}
}
.td-subfooter-menu {
display: inline-block;
margin: 0;
float: right;
/* responsive landscape tablet */
/* responsive landscape tablet */
/* responsive portrait tablet */
/* responsive portrait phone */
}
#media (min-width: 1019px) and (max-width: 1140px) {
.td-subfooter-menu {
padding-right: 40px;
}
}
#media (min-width: 768px) and (max-width: 1018px) {
.td-subfooter-menu {
padding-right: 48px;
}
}
#media (max-width: 767px) {
.td-subfooter-menu {
float: none;
}
}
.td-subfooter-menu li {
display: inline-block;
margin-left: 0;
}
.td-subfooter-menu li a {
margin-right: 16px;
line-height: 34px;
display: inline-block;
color: #ccc;
}
.td-subfooter-menu li a:hover {
color: #4db2ec;
}
.td-subfooter-menu li:last-child a {
margin-right: 0;
}
.td-subfooter-menu ul {
display: none;
}
Thank you for such depth! Here's some CSS you need to add:
.td-pb-span5.td-sub-footer-copy {
float: none;
text-align: center;
margin:0 auto;
}
The reason why you need this is because your subfooter is following some rules that are already established for the rest of your page:
.td-pb-row [class*="td-pb-span"] {
display: block;
min-height: 1px;
float: left;
padding-right: 24px;
padding-left: 24px;
position: relative;
}
Simply removing the immediately above CSS will 'break' the rest of your page's layout.
Edit, to answer comment question:
Apologies, here's a bit more information:
When CSS is being applied to an element that is already being styled by a different selector's rules, there's a calculation of specificity. The CSS I've given you will be fine on its own if added, however, if you'd like to add it to the selector you already have, .sub-footer-copy, then you'd have to add !important to override your already written CSS, like so:
td.sub-footer-copy{
float: none !important;
text-align: center;
margin: 0 auto;
}
This is because the selector .td-pb-row [class*="td-pb-span"] is more specific than the selector .sub-footer-copy. Here's some further reading on this:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Also, I'd like to note that the selector .td-pb-row [class*="td-pb-span"] is an attribute selector referring to a CSS class, so it is similar to .td-pb-row .td-pb-span
I have a menu bar like this
<header>
<nav>
Home
Our Story
Tools
Technology
Pricing
Contact
Careers
</nav>
</header>
The CSS is follows
header {
position: fixed;
width: 100%;
height: 65px;
opacity: 0.8;
background-color: #fcfcfc;
border-bottom: 5px solid #53bf6b;
z-index: 10;
}
header nav {
padding-top: 10px;
text-align: center;
}
header nav a {
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-weight: 300;
font-size: 26px;
padding-right: 20px;
color: #f35626;
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: hue 60s infinite linear;
}
And when the user resizes I want to Nav A to be followed below (align vertically) How can I do this ?
#media only screen and (min-width: 150px) and (max-width: 550px) {
/* I must set the code to arrange the nav a items here */
}
What should I do to make the nav a items follow each other vertically when resized ?
Use display block like there:
http://jsfiddle.net/c0y518bn/
#media only screen and (min-width: 150px) and (max-width: 550px) {
nav a {display: block;}
}
Fixed border-bottom version: http://jsfiddle.net/c0y518bn/1/
header nav a {
display: block; /* you can also try position:relative; */
}
Today I tried use SCCS Compiler (http://leafo.net/scssphp/) and i fell in love with this tool, but I need one more feature.
I generated compressed CSS file like that:
html,body{height:100%;}html,body{height:100%;}html,body{height:100%;}#media all and (max-width:960px){body{height:80%;width:95%;}}#media all and (max-width:480px){body{height:100%;width:90%;}}nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}html,body{height:100%;}html,body{height:100%;}#media all and (max-width:960px){body{height:80%;width:95%;}}#media all and (max-width:480px){body{height:100%;width:90%;}}html,body{height:100%;}
Uncompressed file:
html, body {
height: 100%;
}
html, body {
height: 100%;
}
html, body {
height: 100%;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
body {
height: 100%;
width: 90%;
}
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
html, body {
height: 100%;
}
html, body {
height: 100%;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
html, body {
height: 100%;
}
body {
height: 100%;
width: 90%;
}
}
html, body {
height: 100%;
}
I have this code in string variable in PHP and I need remove duplicates. It's sounds easy, array_unique and that's it. Of course. But i need unique code for normal css and for every media separately. So i need output:
html, body {
height: 100%;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
#media all and (max-width: 960px) {
body {
height: 80%;
width: 95%;
}
}
#media all and (max-width: 480px) {
html, body {
height: 100%;
}
body {
height: 100%;
width: 90%;
}
}
So this script don't remove html,body { height: 100% } from #media all and (max-width: 480px) because in this media is unique.
Could you help me?
If you can put every media queries at the end of the file I would be happy.
you should use a css optimization like: https://github.com/GoalSmashers/clean-css
and I advise you to use Grunt in combination with scss and cleancss plugins for it instead of using PHP to parse your scss -> css, once you're used to it it's far easier to handle.