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.
Related
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%;
}
When using Chrome on PC and refreshing our page, sometimes the two paragraph text area where it says "Small Business Finance Team doesn’t stop advocating for its clients..." will ignore its parent div's 580px width rule and display behind the form on the right.
I'm not sure if this is because of the mobile responsive design or the div placement, but it's very strange due to Firebug displaying 580px whether the text is inside or outside the 580px width. The width value is never crossed out to indicate that the rule isn't being used.
Adding different !important rules, paddings, margins and commenting out the mobile area doesn't seem to fix the issue.
Website: http://smallbusinessfinanceteam.com/gold
Example image: http://i.imgur.com/VDNHmG5.png
Try removing the width: 580px property and just keeping the max-width: 580px property on the .left class.
.left {
max-width: 580px;
float: left;
padding-right: 30px;
overflow: auto;
}
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;
}
Hello I have a header that I am trying to get working and I just got the menu working correctly, but now I can't get the size working properly.
The header is located at www.g-evo.com/header.php and what I want to do is shrink the grey a little bit so its more flush with the logo. I still want to keep those coloured boxes in the white however.
The CSS looks as such:
<style type="text/css">
#header-container {
/* centering for IE */
text-align: center;
}
#menu {
width: 950px;
/* centering for other browsers */
margin: auto;
}
#logo {
width: 950px;
/* undo text-align on container */
text-align: left;
/* centering for other browsers */
margin: auto;
border-style:hidden;
border-width: thick;
}
body {
width: 950px;
/* undo text-align on container */
text-align: center;
/* centering for other browsers */
margin: auto;
}
#headercolor {
background-color:#EEEEEE;
}
</style>
Thank you
I believe this is actually a matter of your HTML markup, rather than your CSS. You have two #logo divs (as a side note, you should only use each ID once per page), the second of which is causing the extra gray space you are referring to.
You should put /header_media/GTextured.png and /header_media/shapeimage.png in the same div, and align them next to one another, which should solve your problem.
For starters, you're using the "logo" id on two different items on the same page... that's not correct, since the ID attribute should be unique per element.
On the other hand, I don't really understand what you want, but if it's just to get the menu a bit closer to the logo, I'd add a class or change the id for the second div with the logo ID and set it a height of 20px, or so..
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...