I have a very weird problem and I just can't seem to be able to find a fix.
When I load a post on my site, it's supposed to show a main image, and any other uploaded images below it. The main image loads/shows fine, but all other images related to that post load but don't show on the page.
The container for the images loads too, so you I can see that there's an empty space where the images should have loaded. If I "inspect Element" I can clearly see that the image exists, and hovering over the line marks the container. I can also see that the image has loaded successfully (200). If I make any live CSS changes via the "Inspect Element", the images pop up and shows fine.
I have a feeling it's a CSS issue, but nothing I've tried seems to work. Any help is greatly appreciated.
PHP:
<?php
$arr = AuctionTheme_get_post_images(get_the_ID(), 4);
if($arr)
{
echo '<ul class="image-gallery">';
foreach($arr as $image)
{
echo '<li>'.wp_get_attachment_image( $image, array(130, 96) ).'</li>';
}
echo '</ul>';
}
?>
CSS:
.image-gallery {
list-style-type: none;
overflow: hidden;
margin: 10px 0 0;
padding: 0;
text-indent: 0
}
.image-gallery li {
float: left;
display: block;
margin-right: 5px;
margin-left: 0;
min-height: 106px;
min-width: 145px
}
.attachment-130x96 {
max-width: 130px;
max-height: 130px;
width: auto;
height: auto;
margin: 0;
display:block;
}
Screen Shots:
This is how the post shows when the page loads
The images shows after the slightest CSS change
Related
I cannot increase product gridview image size. Though I have increased list view image size by going to Admin->Extensions->Extensions->Themes and thereby editing default store theme. Here I can edit Product Image List Size. But here is no mention of Product Image Grid Size.
I do not know where to edit product image grid size. The List size has been increased but of no use because when someone opens the product, the default view is Grid View which is not increased. Though the List Size is increased but someone cannot see bigger image unless one does not click the List size because the default view when someone opens a product is grid view.
How can I increase image size in grid view? I am using default theme with OC 3.0.2.0.
Please note that there is this CSS property (from bootstrap) that does not allow the images to be larger than the product box:
max-width: 100%;
The product box in the grid view has some col class like this:
<div class="product-layout product-grid col-lg-4 col-md-4 col-sm-6 col-xs-12">
You can remove those classes from the twig file, like this:
<div class="product-layout product-grid">
Or you can add this CSS code:
.product-grid {
width: auto;
float: none;
clear: none;
}
At the bottom of stylesheet.css to override the bootstrap column width:
catalog/view/theme/default/stylesheet/stylesheet.css
Then you may need to clear the theme caches and the browser caches to see the change.
Well, but an opencart doesn't provide any other image settings.
You could find out by looking into your stylesheet.css file, and possibly find different layout settings for product-list and product-grid Sections.
Then, you could add some min- or max-height/width or then a 'fixed' height/width image size Values to the individual Sections in the right places, to find out if it works. Still the responsive Function might still resize the images to a smaller Value, if no min-value has been set, but not to a larger one, and only, if a screen resolution gets smaller.
That's all I can do for you, and the time invested only depends on how complicated
the Theme Coder worked. And depending on how it's been coded, it might not be
possible either, without a fundamental rewrite of the sections involved. Don't forget to make a backup copy of the stylesheet first! But don't worry, you cannot ruin anything. And make sure, to always first RESET your entire Cache Systems, as well as the browser Cache, before testing for results.
Sample of such a Stylesheet section:
/* product list */
.product-thumb {
border: 1px solid #ddd;
margin-bottom: 20px;
overflow: auto;
}
.product-thumb .image {
text-align: center;
margin: 10px;
}
.product-thumb .image a:hover {
opacity: 0.8;
}
.product-thumb .image img {
margin-left: auto;
margin-right: auto;
}
.product-grid .product-thumb .image {
float: none;
}
#media (min-width: 767px) {
.product-list .product-thumb .image {
float: left;
padding: 0 15px;
}
}
.product-thumb h4 {
font-weight: bold;
}
.product-thumb .caption {
padding: 0 20px;
min-height: 60px;
}
.product-list .product-thumb .caption {
margin-left: 230px;
}
#media (max-width: 1200px) {
.product-grid .product-thumb .caption {
min-height: 210px;
padding: 0 10px;
}
}
#media (max-width: 767px) {
.product-list .product-thumb .caption {
min-height: 0;
margin-left: 0;
padding: 0 10px;
}
.product-grid .product-thumb .caption {
min-height: 0;
}
}
I made a comment section for my website and I have a button that allows you to edit your comment which reroutes you to another page. I have a margin set up so content doesn't get hidden behind my header or footer but now I can't seem to find a way to get the background color to stretch across to the very bottom of the page.
I messed around with the position in css and the background color did stretch to the bottom of the page, but then my header disappeared.
My CSS...
#headerContainer {
margin: -60px 0px 0px 0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
}
.editCommentBody {
margin: 60px 0px 40px 0px;
height: 100%;
text-align: center;
background-color: #ddd;
}
The editCommentBody class is everything from the header to the edit button.
you have not set a value for the fixed position in your headerContainer style .
try giving left:value and top:value for it and also , when you use positions , margins wont work sometimes , if your margin even works , it has a top:-60px which cause your header to be out of screen , try this :
#headerContainer {
margin:0px;
background-color:#333;
height: 60px;
width: 100%;
position: fixed;
left:0px;
top:0px;
}
Try adding the desired background color to the body instead, like this:
body { color: #ddd; }
Try using:
box-sizing: border-box;
I have a navbar, but I don't know where the white space can display above and below my navbar, but when I try without using Laravel, the white space is gone.
I have try use css
* { margin: 0px; padding: 0px; }
but the result is same
here my Navbar paste.ofcode.org/xWBgAJUmWt5h7dYdALNnjC
and my css paste.ofcode.org/nNwTafvyzECeRgWSjUhrT9
With Laravel
without Laravel
Two causes:
The browser has a native 8px margin on the body, so start with:
html, body{ margin: 0; }
header .top-bar .social is poking out. Make it:
header .top-bar .social { margin: 0; }
And the problems are gone.
You can then delete the
* {
margin: 0px;
padding: 0px;
}
Try with Height:
.navbar {
height : 20px ; //required height
}
I started making a new WordPress theme with Bootstrap when I stumbled across a problem.
I found out that when I create a new post with some text and an image at the top(Aligned to left) then the image is actually not aligned.
The image is in the top left corner and the text is underneath it.
I searched on Google and read blog posts and so on.
Most people suggest adding some styling in style.css that would align the text.
Example:
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
Of course, this aproach didn't work for me so I checked and I think that the problem is because these classes work only if applied to image tag.
When accessing the_content() function, the image is printed inside a div tag.
<div id="attachment_66" style="width: 310px" class="wp-caption alignleft">
<img class="size-medium wp-image-66" src="path/to/img" alt="Sphere" width="300" height="169" sizes="(max-width: 300px) 100vw, 300px">
<p class="wp-caption-text">Who doesn’t like spheres?</p>
</div>
If the problem really is because of those tags, how can I get alignment classes to be applied to img not div tags?
This is how it looks.
Thanks to #Andrei Gheorghiu I managed to solve the issue and I am gonna answer my question.
Premade WordPress themes have some css that I haven't included.
So, this is what you need to include in you style.css
.alignleft { float:left;}
.alignright { float:right;}
.aligncenter { display: block; margin: auto; }
Instead of creating the following style:
img.alignleft { float: left; margin: 0 1em 1em 0; }
Why don't you create it like:
div.alignleft img { float: left; margin: 0 1em 1em 0; }
I'm trying to catch a css selector by firebug of a part in html page but seems doesn't exist and firebug can't see it. It can't see the dotted line between the item menu on top. This is the website: http://debatoversigt.dk/index.php/ct-menu-item-3.
Maybe this dotted line is made by a php script?
I don't know the reason.
The dotted line is a background image that is set on the ul.art-hmenu>li:before pseudo-element.
Here's the CSS you want to look at / remove:
ul.art-hmenu>li:before {
position: absolute;
display: block;
content: ' ';
top: 0;
left: -1px;
width: 1px;
height: 43px;
background: url('../images/menuseparator.png') center center no-repeat;
}