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;
}
Related
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.
Everytime I add a Gallery in a post, I need to modify the html from
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
to
<div style="margin: 0 auto; width: 500px;">
[gallery type="rectangular" link="none" ids="1743,1742,1741"]
</div>
I want to modify the php file to have this extra html added. Is this possible to do? I have limited knowledge on php and am struggling to find where this gallery tag is generated.
The gallery gets generated in a <div> with class="gallery" and some variable classes, depending on the gallery settings. See wp-includes/media.php#L1046.
So, you can simply add the following style in your stylesheet (styles.css), or using a plugin like Simple Custom CSS.
.gallery {
margin: 0 auto;
width: 500px;
}
If your theme is responsive, I would suggest to also set the maximum width to 100% to make sure it fits smaller screens as well.
.gallery {
margin: 0 auto;
width: 500px;
max-width: 100%;
}
Do note that since you specifically add "rectangular" as type, you might want to use a different class than gallery to make sure the styles do not get applied to other galleries.
To verify which class can be used, you can inspect the gallery in your browser:
Hover over the gallery,
click on right mouse button and select 'inspect element'.
I hope that helps. GL!
I've been trying to figure this problem out, but no luck. There's probably a simple solution that I'm missing. I'm working on a Home Page template that has 4 featured products. The featured products end up showing diagonally and the images also overlap the title, price, and add to cart buttons. If anyone can help, that would be great!
Here's a link to the page that the template is on: http://playground.krisyoungboss.com/home/
(Going to change the front page displays later)
And also here is the shop page link if anyone needs to compare: http://playground.krisyoungboss.com/shop/
Thanks❤️
You've got a collection of things going on.
First, the reason the things are showing diagonal is because you have a <pre> element in your code. I suspect you may have copy-pasted a shortcode, and in doing so picked up the <pre> they had wrapped the shortcode with.
So, first things first, edit that page in the WP dashboard, and change to the text view (tab in the top-right corner of the editor area). Look for this:
<pre class="brush: php; gutter: false">
Find it, and remove it (don't forget to remove the closing </pre> tag also).
Then, the reason your images are covering up the content below is because of this declaration in your stylesheet (on line 228 of your stylesheet):
img.wp-post-image {
border: 5px solid #000000;
border-radius: 5px;
float: left;
height: 300px;
margin-bottom: 15px;
margin-right: 10px;
width: 300px;
}
The float:left is applying to the images in your featured section, which is causing the problem. Additionally, the height / width are not good (although they are being overridden by other styles).
Remove float:left, or else add a style like so (after the above styles in your stylesheet):
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img {
float: none;
}
Finally, your add-to-cart button is too wide. You need to address the styles for it, also - it's spilling out of the parent li elements.
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 have a fairly simplistic website that I have setup for a phone, tablet, and desktop. Using media queries to format the CSS accordingly. Challenge is the site is PHP based, dynamic, and doesn't use the full width of the screen. Page has two tables, side by side, left justified, each 500px in width. So my desktop for instance is 1388px wide. Centering the title makes it off center from the middle of the two tables. So I added:
.centering {width:1020px; padding-top:5px; border:0; margin-top:2px; text-align: center; font-size: 1.6em; font-family: Sans-serif; font-weight:bold;}
to the paragraph tag for the title on the top of the page. OK great, I just hard coded the placement. Have a .centering for each media query with various widths as the table widths vary per device. So it works, have one for desktop, one for the iPad landscape, one for iPad portrait (portrait tables adjust one on top, one underneath), various iPhone versions and some general ones. On the iPad landscape and desktop there is one problem.
I mentioned it was PHP and dynamic. A user can pass along in the PHP URL, that they do not want to see the second table. (ex. http://www.myurl.com/test.php?showsecond=0). Well that's great, however now I have one table of 500 pixels, and a title centered based on a width of 1020px. But the width is now only 500px. I tried loading various styles dynamically based on what was set, but for some reason when I load a style from file, as opposed to being in the physical page, it had some weirdness. Like extra space between two lines of text. Anyway, is there any suggestions how to deal with this title? Is there an element like a div or something I can place around the entire page, that will determine the current page width (based on content), and the title centered will automatically fit into it correctly without having to hard code width information for it? Especially with the dynamic changing width of a page even in the same orientation on the same device?
Here's some addition imagery as I guess I'm being told I write to much. On the desktop I have a webpagge with two pictures:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED TWO TABLES WITH A LOT OF WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
When the PHP is set thru the URL to not display the second table I get:
IF THE WEBSITE LET ME POST PICTURES, YOU WOULD SEE A LEFT JUSTIFIED SINGLE TABLES WITH A LOT MORE WHITE SPACE ON THE RIGHT OF THE BROWSER WINDOW.
As you would have seen, the title doesn't recenter based on the smaller content and the page doesn't use the full screen with so don't want it to center by "page width".
Here is my media query to do the initial center
<code><pre>
#media only screen and (min-width : 1224px)
{
th { font-size: 1.6em; font-family:Sans-serif; }
td { font-size: 1.65em; line-height: 1em; font-family:Sans-serif;}
h1 { font-size: 1.75em; line-height: 1.5em; }
h2 { font-size: 1.25em; }
table { width: 500px; align: left; }
.centering {width:1020px; padding-top:5px;
border:0; margin-top:2px; text-align: center;
font-size: 1.6em; font-family: Sans-serif;
font-weight:bold;}
}
</code></pre>
And my PHP to output the title:
echo "<p class='centering'>Pool Mining: " . strtoupper($obj['multiport']['mining']) . "</center></p>";
ThoughTs?
Thanks.
Set the style as:
<h1 style="text-align: center;">You title</h1>
If you think that browser fails to center your text then check your tables to be centered, if not check you glasses ;)