This is the website I'm working on http://www.jokerleb.com/ and I'm using this https://responsive.menu, the free version. it will appear on devices 400px and smaller.
How to split its columns into 2 like so?
Don't know how to edit the CSS to make it look right, if it's possible in the first place.
Adds these lines to your code :
#media screen and (max-width: 400px){
#responsive-menu-container{
width:100%;
}
#responsive-menu {
display: flex;
flex-wrap: wrap;
}
#responsive-menu li{
width:50%;
}
}
It works for me.
You'll want to use media queries, so something like this should do it for you:
<style>
#media screen and (max-width: 400px) {
#responsive-menu-container li.responsive-menu-item {
width: 50%;
display: inline-block;
}
}
</style>
Note that you may need to play around with this CSS a little, since widths will vary based upon padding, margin and the display type. If you provide a sample of your CSS (or better yet a fiddle) I can help you more exactly.
The lines above make it look like this once the category button is clicked:
If you'd prefer the thing go the whole width, include this in your #media option as well:
#responsive-menu-container {
width:100%;
}
Related
I am a high school student who is trying to make own website. If I write only block element, it works properly but If it is in html code, not working. That is like inline elements. Sometimes works, sometimes not. No idea what happened.
That is what I have written:
<?php
echo "<div>test</div><div>test</div><div>test</div><div>test</div><div>test</div>";
?>
Sorry for bad English.
Assuming you want it to be a vertical list instead of a horizontal one, the reason it's going horizontal is your newsfeed class has display: flex; set, removing this will make it the same as the one at the top
Inside your index.css file, this is the section that's affecting it becoming a vertical list
.newsfeed{
width: 100%;
height: 100%;
padding: 1rem;
display: flex; // this line
flex-wrap: wrap;
flex-flow: row wrap;
}
This should be tagged under #html or #css, as it's not the PHP that's causing the issue.
i have a padding problem that only affect mobiles.
the reason for this issue is some how known, but how to fix the the issue without affecting the computers preview.
here is the suspect
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
**padding-left:150px !important;**
}
here a preview from the desktop so you can understand the reason behind the padding.
it looks like that padding in a general setting or so.
so what can be done to the solve the problem?
re-allocate the padding line to more specific function ?
or something else.
It seems you identified the problem yourself. The padding is applied in the mobile page.
A fix would be to use a media query to find out if the user is viewing on a desktop. If he is, add the padding to the element.
first remove the padding from the main styling of the element
.entry-content,
.entry-summary {
margin-top: 20px;
max-width:1000px;
width: 100%;
float: none; /* i don't know if this affect any thing */
**float: none!important;**
}
and add something like this to your stylesheet
#media only screen and (min-width : 1224px) {
.entry-content, .entry-summary {
padding-left: 150px;
}
What this does is only applying the padding-left if the screen's width is larger than 1224 pixels (so a desktop, basically).
A better solution though, would be to change the elements so the left-padding is not needed to position the text right. But this is an HTML issue and I don't have enough information to help you with this.
Here is my code for a fixed header.
<?php } ?>
<header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?> relative_header <?php endif; ?>">
I would like to incorporate CSS to disable fixed on mobile. My website is 780webdesign.com if you need to view source. Thanks much.
EDIT: Still not resolved
If you want to make the header "no longer fixed" but still visible, you can put it back to the default value, which is static.
/* To revert a fixed element to the default position */
.fixed-header {
position: static;
}
Currently you're telling it to not display at all. You'd want to adjust the position of the element. So you would do something like this:
#media screen and (max-width: 767px) {
.fixed-header {
position: relative;
}
You may have to add some additional properties to fix positioning but that would be a good start.
EDIT:
After getting linked to the site, and taking a look this is what you would want to use.
#media screen and (max-width: 767px){
.fixed-header{
position: relative;
margin-bottom: -270px;
}
}
You have inline styles which are going to cause issues with your classes, so you need !important on anyhting you use to overwrite them. The following will resolve you issue from what I see:
#header.fixed_header {position: relative !important;}
#page {margin-top: 0px !important;}
This code just needs wrapping in a css media query to set it to happen at what your preferred widths are.
I am working on a WordPress site and there is something that I just can't figure out no matter how hard I try. I want to have a grid similar to this (http://www.elegantthemes.com/gallery/origin/) but more like this: (http://themeforest.net/item/hercules-portfolio-business-wordpress-theme/full_screen_preview/5124743). You'll see that in the hercules theme the grid is only at the top of the page. I want to do something similar to that at the middle of the page. Unfortunately I cannot switch themes to get that one function. So I wanted to know how I would create my own version. Can someone point me in the right direction?
P.s. the grid does not need to have any fancy zoom animation and doesn't even have to be linkable. Just static pictures like that in a grid of 4x2. No spacing or padding or margins between the images. And I contacted the designer of that theme and he mentioned that it is not a plugin that does it. It's custom CSS3. He wasn't any more helpful then that though :/
I'd use an unordered list to contain the images, float the list items and apply a 25% width. The images then need a 100% width, and max-width 100% and height: auto a for responsive layout. The images you upload would need to have the same height dimension (or you could set a fixed height on the list items, but risk losing some image content).
ul#picture_grid {
list-style: none;
width: 100%;
overflow: hidden;
}
#picture_grid li {
float: left;
width: 25%;
}
#picture_grid img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS
#transfer_head2
{
display:none;
}
and I changed the display status to display:block in my print CSS
#transfer_head2
{
display:block;
}
but this is not working. Why? Can anybody help me?
Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.
Maybe your display: none is overwritten by another property later defined. Try !important
display:block !important;
Is #transfer_head2 a TABLE? If so, you need to use:
#transfer_head2 { display: table; }
Is it a TR?
#transfer_head2 { display: table-row; }
Is it a TD or a TH? Then it's the following:
#transfer_head2 { display: table-cell; }
Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:
#media screen {
#transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}
#media print {
#transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}
EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:
#transfer_head2 { background-image: url('../image/print_banner.jpg'); }
it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.
Make sure the container divs (if any) is not hidden
Check the generated source with web developer toolbar to see the inherited properties of the div.
Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.
One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.
EDIT: ugh, Andrew has covered that already...