Here is my website's mobile version
I want to add small text 'MENU' here
When I try to add here it is visible in desktop version too.
<div id="responsive-menu-container">
<span class="menu">MENU</span>
</div>
How to add this text in mobile version only?
Or maybe not the code, but the way I try to add is incorrect?
You can hide or show it with #media tags with css. Like this:
Your normal css class:
.menu{
display:none;
}
Your mobile version class:
#media only screen and (max-width: 767px) {
.menu{
display:block;
}
}
After that by using your example, you have to put "menu" span inside your "responsive-menu-container". After adding it, you can adjust its position.
<div id="responsive-menu-container">
<span class="menu">MENU</span>
</div>
Edit for position:absolute :
If you are using a reference library for menu bar and creating this content with automatically, you can also use position:absolute for .menu class. Like this:
#media only screen and (max-width: 767px)
.menu {
display:block;
position: absolute;
z-index: 9999999; /* I gave this value because your menu bar's z-index must be smaller than this. */
margin-top: 15px;
margin-left: 15px;
}
Related
Hi there and thanks in advance,
NOTE: The site is NSFW, just some ebooks for adults (romance and that stuff, but the ebooks covers may be hot).
My environment:
I have WP with a woocommerce, storefront+bookshop child theme
I have the Snippets plugins where I add all my PHP code
And I add CSS to Custom CSS within customizer
Now the problem:
I can´t figure out how to make site header, top nav bar and logo + buttons responsive.
The fact is that I could get some Top header styling using some PHP and CSS, BUT when I go to mobile view, the Top nav var, header, logo and menu goes crazy!
I need to fix that, I don´t know what to try (I googled a lot, tried changing values, %, float, inline, block, important, whatever) but I can´t get the right tip.
I don{t know if the child theme or storefront itself is overriding my attempts, maybe I have to unhook some function.
Maybe is just as simple as putting all 3 PHP snippets into one div and many spans tag, but I can´t figure out how I am burnt today.
I would thank any advice.
Here goes my CSS
/* Logo size for mobile site */
#media screen and (max-width: 768px) {
.site-header .site-branding img {
max-height: none !important;
max-width: none !important;
width: 322px !important;
}
}
/*Remove title from Shop page*/
.woocommerce-products-header
{display: none;}
/*Hide Pages Tite with custom Class added to PHP snippets*/
.hidetitle .entry-header {
display:none;
}
/*Make primary Pages full width*/
body.woocommerce #primary {
width: 100%;
}
/*Align Search Bar and make text pink*/
#woocommerce-product-search-field-0 {
display:inline-block;
width:100%;
color: #fe00a1;
border: solid 1px #fe00a1;
}
/*Edited Cart*/
#site-header-cart{
padding-bottom:20px;
width:15%;
}
/*Changed cart icon bag f\290 to to cart icon f\217 */
.site-header-cart .cart-contents:after,
.storefront-handheld-footer-bar ul li.cart > a:before {
content: “\f217”;
}
/*Align Help link*/
#help{
display:inline-block;
padding-left: 35px;
padding-right: 35px;
}
/*Align Gift card*/
#gift-cardl{
margin-left:80px;
}
/*Add top padding to rectangle*/
#rectangle {
padding:17px;
}
**PHP snippets**
add_action( ‘storefront_header’, ‘header_custom_gift_button’, 40 );
function header_custom_gift_button() { ?>
<span>
<button id=”gift-cardl”>Gift Card</button>
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_help_link’, 40 );
function header_custom_help_link() { ?>
<span style=”width:100%;”>
Help
</span>
<?php
}
add_action( ‘storefront_header’, ‘header_custom_subscribe_button’, 40 );
function header_custom_subscribe_button() { ?>
<button class=”subscribe_newsletter_btn”>Get Daily Book Bargains</button>
</span>
<?php
}
On the University system am developing. I supposed to generate admission letters where each letter has two pages with a dynamic diagonal student name .
The problem is on printing the watermark comes to only one page instead of staying on each page yet on #media screen am achieving it.
<style>
#media screen{
#adm #background{
position:absolute;
z-index:0;
display:block;
height:850px;
width:78%;
}
#adm #watermark{
color:#f0f0f0;
font-size:80px;
transform:rotate(310deg);
-webkit-transform:rotate(310deg);
}
#adm #content{
position:relative;
z-index:1;
}
}
#media print{
#adm #background{
position:fixed !important;
z-index:-1;
text-align:center;
display:block;
height:850px;
width:78%;
background:gre
}
#adm #watermark{
color:#f0f0f0;
font-size:70px;
transform:rotate(310deg);
-webkit-transform:rotate(310deg);
}
#adm #content{
position:relative;
z-index:1;
}
}
</style>
<div id='adm'>
<div id='background'>
<div id='watermark'>John Morgan</div>
</div>
<div id='content'>Admission content</div>
</div>
I want when loop and print the admission text watermark of the student appears diagonally in the each admission letter.
I think you need to set the position of your element from the top in your print media section and as many you want you can increase that.
In your case, I set the .background CSS top:50%; and it shows the text in the middle of the page.
And If you set it to top:150%; it will be shown in the second-page middle.
#media print {
.adm .background{
position:fixed !important;
z-index:-1;
text-align:center;
display:block;
height:850px;
width:78%;
background:green;
top:50%;
}
I provide an online demo for your requirements, please check here.
https://codepen.io/nasser-ali-karimi/pen/MdgGoL
I have a few PDF files that were converted to HTML. I fully understand that this isn't ideal, but that's not something I can change.
The issue is that it places content at very specific points which breaks mobile responsiveness.
A typical HTML will looks like this:
<div class="pc pc1 w0 h0">
<div class="t m0 x0 h2 y1 ff1 fs0 fc0 sc0 ls0 ws0">Text</div>
</div>
And the CSS file like this:
#media screen and (-webkit-min-device-pixel-ratio:0){
.sc_{-webkit-text-stroke:0px transparent;}
.sc0{-webkit-text-stroke:0.015em transparent;text-shadow:none;}
}
.ws0{word-spacing:0.000000px;}
.fc0{color:rgb(35,31,32);}
.fs0{font-size:168.000000px;}
.y0{bottom:781.000000px;}
.h0{height:841.889770px;}
.w0{width:595.275630px;}
.x0{left:34.000000px;}
}
Is it possible to somehow make it scale? I'd even be happy(-ier) if I could just apply a media query to reduce everything in size by 20%.
As it appears from the posted CSS, position: absolute is used, so I can't see any other solution (yet) than using transform: scale() (if not to rewrite the html of course)
By using media query it could look like this
.outer {
height: 500px;
width: 800px;
background: red;
transform-origin: 0 0;
}
#media screen and (max-width: 1000px) {
.outer {
transform: scale(0.9);
}
}
#media screen and (max-width: 900px) {
.outer {
transform: scale(0.8);
}
}
#media screen and (max-width: 800px) {
.outer {
transform: scale(0.7);
}
}
height: 400px;
width: 600px;
}
<div class="outer"></div>
I have this HTML:
<div class="dashboard_wrap">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
that displays 3 divs, here is the CSS:
.dashboard_wrap {
padding:10px;
}
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
width: 50%;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_clear:after {
content: "";
display: table;
clear: both;
}
#media all and (max-width: 700px) {
div.wrap div {
width: 100%;
float: none;
}
}
I am using PHP so only certain users can see certain divs. If a user can only see the first 2 divs, how can i make them 50% each rather than 40%?
There is no need to use php or javascript for this. You can use basic html and css for this.
You can check the html fiddle for this: http://jsfiddle.net/4WaX4/1/
All the css which you need is this:
.dashboard_wrap {
display:table;
min-width:500px;
background:#00ff00;
}
.dashboard_items {
display:table-row;
}
.dashboard_items div{
display:table-cell;
border:1px solid #ff0000;
}
#media all and (max-width: 700px) {
div.dashboard_items div {
width: 100%;
display:block;
}
}
And the html looks as follows:
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
</div>
</div>
<div class="dashboard_wrap">
<div class="dashboard_items">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
</div>
Very simpel and quick. When you resize the result window in jsfiddle you see that the divs become 100% relative to the outer div (500px).
I hope this is the solution youre looking for...
You can specify the class of the wrapper based on the number of items inside.
CSS classes for each variant will handle the style automatically.
If however the number of divs can extend beyond expected numbers, then dynamic inline styles may be your solution.
<div class="dashboard_wrap has3">
<div>orders</div>
<div>porting</div>
<div>contact</div>
</div>
<div class="dashboard_wrap has2">
<div>orders</div>
<div>porting</div>
</div>
<style>
.dashboard_wrap div {
border-left:1px solid black;
padding:10px;
height:200px;
margin-bottom:50px;
overflow-y:scroll;
float: left;
}
.dashboard_wrap.has2 div {
width: 50%;
}
.dashboard_wrap.has3 div {
width: 33%;
}
</style>
When the page gets rendered, only two divs will be visible. What you need to do is use a client-based language i.e. javascript or jQuery, to manipulate what is visible on screen.
Use a simple check to see what divs are visible or use php to generate a value which you can hide in the page to make it easier to resize the divs like:
<input type='hidden' id='divs_visible' value='" . $divs_visible ."' />
then using jQuery:
$(document).ready(function() {
var divsvis = $("#divs_visible").val();
if(divsvis == 2)
{
// resize the divs
}
});
EDIT
You can also render all the divs, then using jQuery and the value you've placed in the hidden input, you can simply hide the div you do not need with:
$("#div_to_be_hidden").hide();
I'm trying to code a design I've just made: http://www.richardhedges.co.uk/brlan/design.jpg
I'm pretty much done coding but the only thing I don't know how to do is the footer overlapping the main content. What I'd like it to do is scroll the content. (Like it is on Facebook messages)
The footer is simply a div with nothing in it:
<div class="footer"></div>
And here's the stylesheet:
div.footer {
width: 980px;
height: 114px;
float: left;
background-image: url(../images/footer.png);
background-repeat: no-repeat;
margin-bottom: 20px;
}
I need to create a new div which I'll include the content in (as shown in the design.JPG) however it must be 'behind' the PNG image in the footer. I've absolutely no idea how I'd do this - My apologies for ignorance.
div#footer {
position: absolute;
bottom: 0px;
z-index: 9001;
}
div#content {
position: relative;
}
Use absolute positioning and a higher z-index on the footer div than on the ones it'll be in front of.