I created a grid using the Pods plugin. For some reason, there are extra pixels at the bottom of each div (see the white space). I've gone through the code multiple times and cannot find a reason for this. Below is the css for the grid. Would anyone know where the white space is coming from?
link: http://test.mpluczenik.com/#work
Thank you!
Functions.php:
// Add Image size for Portfolio List
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
// additional image sizes
add_image_size('portfolio-thumb', 300, 300, true ); // (cropped)
}
Pods template:
<div class="portfolio-list">
<a href="{#permalink}">
<div class="overlay">
<a href="{#permalink}">{#post_thumbnail.portfolio-thumb}
</a>
<p>
<a href="{#permalink}">{#post_title}
</a>
</p>
</div>
</a>
CSS:
div .portfolio-list{
border: 0px;
padding: 0px;
width: calc(20%);
overflow: hidden;
position: relative;
display: inline-block;
float:left;
}
img.attachment-portfolio-thumb{
width:100% !important;
height:100%!important;
}
div .portfolio-list p{
display: none;
color:#000;
}
div .overlay:hover:after {
content: ' ';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(234,79,38,.75);
width: 100%;
height: 100%;
border:none;
margin:0;
padding:0;
}
div .portfolio-list:hover p {
display:block;
z-index: 9999;
position:absolute;
bottom:50px;
left:0px;
text-align: center;
width:100%;
overflow:hidden;
color:#fff;
margin: 0px;
}
div .portfolio-list:hover a{
color:#fff;
font-weight: bold;
opacity: 50%;
}
Thank you!
An inline block has a line height and that is where the extra space is coming from. You can remove the line hight by adding line-height: 0 to your css selector div .portfolio-list. More info here.
Related
On woocommerce single product page, the default for gallery thumbnails appears under active image in rows. Currently for me it's displaying 4 images per row.
I believe Woocommerce uses flexslider for product page slider.
So since we are going to have lots of images for each product, I'm looking to add slider navigation to the product gallery while avoiding another plugin. As a result, the product gallery will then show all images on only 1 single row.
Like flexslider2
What would be the best way to achieve this? - Can it be done with pure CSS or would one need to add slider navigation using WordPress filters and CSS?
CSS
flex-control-thumbs {
width: 90%;
position: absolute;
bottom: 0px;
text-align: center;
display:flex;
flex-wrap:nowrap;
border: 1px solid red;
overflow-x:auto;
padding-bottom:10px;
}
.flex-control-thumbs li {
margin: 0 6px;
display: inline-block;
zoom: 1;
}
.flex-control-thumbs li,
.flex-control-thumbs li:first-child {
width: 16%;
vertical-align: top;
margin: 5px 1% 0 0;
min-width: 100px;
}
.flex-control-thumbs img {
width: 100%;
display: block;
opacity: 0.8;
cursor: pointer;
}
.flex-control-thumbs img:hover {
opacity: 0.5;
}
.flex-control-thumbs .flex-active {
opacity: 1;
cursor: default;
}
.product_slider .flex-active-slide a:hover {
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
}
Outer HTML from WC
<ol class="flex-control-nav flex-control-thumbs">
<li><img src="image.jpeg" class="flex-active" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
<li><img src="image.jpeg" draggable="false" /></li>
</ol>
// Add slider navigation using WordPress filters.
add_filter( 'woocommerce_single_product_carousel_options', 'cuswoo_update_woo_flexslider_options' );
/**
* Filer WooCommerce Flexslider options - Add Navigation Arrows
*/
function cuswoo_update_woo_flexslider_options( $options ) {
$options['directionNav'] = true;
return $options;
}
UPDATE
Here is CSS for the Navigation controls / for the Fliter above (next & previous image).
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0;
margin: 0;
padding: 0px;
list-style: none;}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {visibility:visible;content: '\f105';
font-family: FontAwesome;margin-right: 10px;font-size: 70px; }
a.flex-prev::before {
visibility:visible;
content: '\f104';
font-family: FontAwesome; margin-left: 10px;font-size: 70px;}
to solve this you need to add a horizontal slider if thumbnails are many, and some more CSS grid code to make it responsive and spaced properly, I hope you find this useful.
.woocommerce-product-gallery {
display: grid;
gap: 10px }
#media only screen and (max-width: 35.999em) {
.woocommerce-product-gallery {
gap: 6px;
}
}
.woocommerce-product-gallery .flex-control-thumbs {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 17%;
gap: 1rem;
overflow-x: auto !important;
overscroll-behavior-inline: contain;
}
#media screen and (max-width: 47.999em) {
.woocommerce-product-gallery .flex-control-thumbs {
grid-auto-columns: 12.5%;
gap: 6px;
}
}
.woocommerce-product-gallery .flex-control-thumbs li {
float: none !important;
width: 100% !important;
display: grid;
}
.woocommerce-product-gallery .flex-control-thumbs li img {
inline-size: 100%;
aspect-ratio: 1/1;
-o-object-fit: cover;
object-fit: cover;
border-radius: 5px;
}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
border: 5px solid #f2f2f2;
}
#media screen and (max-width: 47.999em) {
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
border: 2px solid #f2f2f2; }
}
.woocommerce-product-gallery .flex-control-nav {
-ms-scroll-snap-type: inline mandatory;
scroll-snap-type: inline mandatory;
scroll-padding-inline: 10px;
}
.woocommerce-product-gallery .flex-control-nav > * {
scroll-snap-align: start;
}
if you wish to also add the navigation the code is easy if need help I can assist
Cheers!
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
The footer is overlapping one of my webpage. all the others pages are fine but this one its overlapping, i dont really want to edit/update the footer as it is working in other pages, but I would like to see if there is something I can do with the css container for this page.
CSS
#box {
width: 100%;
height: auto;
margin-top: 20px;
position:relative;
padding-right:0.4%;
float:left;
margin-bottom: 10px;
}
.boxChildLeft {
left: 0;
width: 80%;
height: 100px;
border: 1px solid;
margin-bottom: 2px;
position: relative;
float: left;
}
CSS footer/body etc
html,
body {
margin:0 auto;
padding: 0;
max-width: 960px;
height: 100%;
background-color: white;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:white;
padding:10px;
}
#body {
padding:10px;
padding-bottom:40px; /* Height of the footer */
}
#footer {
position: absolute;
bottom:0;
left: 0;
right: 0;
height:40px; /* Height of the footer */
background:#EBEBEB;
border-radius: 5px;
}
PHP/HTML
for($temp = 1; $temp <= $cArray[2]; $temp++)
{
$img .= "<div class='boxChildLeft'>
<div class='img'>
<img src='../ProductImages/$cArray[0].jpg' width='100px' height='100px'>
</div>
<div class='prodInfo'>
<p1>$pName</p1><br>
<span id='sp'><p1>$pPrice<p1>
</span>
</div>
</div>";
}
HTML
<div id="box">
<?php echo $img;?>
</div>
The information you provided is not enough, what I suggest is to use W3school HTML validator it will indicate what's missing from your HTML implementation, it will help you by giving suggestions.
I have a searchbar in my header, which I need centered horizontally and just a little bit above the bottom of the header. I was able to achieve this by using
display: flex;
justify-content: center;
align-items: center;
The problem I am having now is that although it is responsive when you make the window smaller horizontally, It is a total mess when you resize the window vertically. I am pretty sure it's because I used margin-top: 350px; to set the vertical position. I also would much rather not use flex display because it isn't supported by much yet. Below is a screenshot of how it looks normaly, and one of how it looks when the view is altered vertically. Also the code pertaining to it. If anyone could help me figure out how to get the searchbar to be responsive vertically, that would be great!
How it is normally:
How it looks when you change the screen size vertically (the searchbar is behind the images):
HTML:
<div class="outcont">
<div id="top" class="header">
<div class="wrap">
<div class="col1"><img class="logoi" src="<?php bloginfo('stylesheet_directory'); ?>/images/main-logo.png" alt="<?php bloginfo('name'); ?> Logo" /></div>
<div class="col2"><?php wp_nav_menu(array('menu' => 'global-nav', 'container' => '')); ?></div>
</div>
<?php get_search_form(); ?>
</div>
CSS:
#searchform div {
shadow: 4px 7px 4px #000000;
margin-top: 350px;
display: flex;
justify-content: center;
align-items: center;
}
#searchform .text {
font-family: 'Merriweather';
padding-left: 35px;
height: 75px;
width: 600px;
font-size: 220%;
color: #B7B7B7;
border-radius: 50px;
background: white url('images/search-img.png') no-repeat;
background-position: 96% center;
}
#searchform .text:focus {
background-image: none;
}
#searchform .text img {
margin-right: 25px;
}
Check out this Fiddle I have made for you.
I have my main div with a background-image and the input inside of that div with the css like so:
#hero {
background: url('https://i.ytimg.com/vi/ReF6iQ7M5_A/maxresdefault.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
height: 100vh;
margin-bottom: 0px;
right: 0;
}
#hero input {
position: absolute;
width: 200px;
height: 34px;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
padding: 5px 10px;
border-radius: 50px;
outline: none;
}
This way the textbox will always stay in the center of the image no matter how the browser is scaled. In order for this to work the textbox must have a defined width and height.
So in your case replace your css for the searchbox with the css I have for #hero input and set the parent divs position to relative with position: relative;.
Please let me know how this works out for you.
Hope this helps!
I am trying to show a lot of results at once (like 25) but my program cut the results around the 5th record having area space still available, the results are in a table
created dynamically but seems that the area doesn't expand accordingly.
<div id="contenido" class="contenido">
<div id="Tabs">
<ul style="cursor:pointer;">
<li id="li_tab1" onclick="tab('tab1')" >
<a>Últimas alertas</a> </li>
<li id="li_tab2" onclick="tab('tab2')"> <a>otras</a> </li>
</ul>
<div id="Content_Area">
<div id="tab1">
<p class="notas">Showing last alerts</p>
<table>
<tr>
<td style="color:blue">Alert</td>
<td style="color:blue">User</td>
</tr>
<?php
while ( $row = $result->fetch_array() ){
echo "<tr><td>".$row['DESCRIPTION']."</td>";
echo "<td>".$row['EMAIL']."</td>";
echo "<td>".$row['SUB_SECCION']."</td></tr>";
}
}
else
echo "error on query: ".$conx->error;
}//else
?>
</table>
</div>
<div id="tab2" style="display: none;">
<!-- We set its display as none because we don’t want to make this
tab visible by default. The only visible/active tab should
be Tab 1 until the visitor clicks on Tab 2. -->
<p>This is the text for tab 2.</p>
</div>
</div> <!-- End of Content_Area Div -->
</div> <!-- End of Tabs Div -->
</div>
CSS creates tabs, but for the moment only the first has the table the other just one line of text, but the table is inside this tab div
archivo css
.contenido {
color: black;/*#333*/
background-color: #F2F2E6;
margin: 0px 0px 5px 0px;
padding: 10px;
border: 1px solid #ccc;
width: 75%;/*678px;*/
height: 480px;
float: right;
display: inline;
}
#Tabs ul {
padding: 0px;
margin: 0px;
margin-left: 10px;
list-style-type: none;
}
#Tabs ul li {
display: inline-block;
clear: none;
float: left;
height: 24px;
}
#Tabs ul li a {
position: relative;
margin-top: 16px;
display: block;
margin-left: 6px;
line-height: 24px;
padding-left: 10px;
background: #f6f6f6;
z-index: 9999;
border: 1px solid #ccc;
border-bottom: 0px;
/* make the top left and top right corners of each tab rounded. */
-moz-border-radius-topleft: 4px;
border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
border-top-right-radius: 4px;
/* end of rounded borders */
width: 130px;
color: #000000;
text-decoration: none;
font-weight: bold;
}
#Tabs ul li a:hover {
text-decoration: underline;
color:red;
}
#Tabs #Content_Area {
/* this is the css class for the content displayed in each tab */
padding: 0 15px;
clear:both;
overflow:hidden;
line-height:19px;
position: relative;
top: 20px;
z-index: 5;
height: 150px;
overflow: hidden;
}
p { padding-left: 15px; }
The problem is inside your CSS.
height: 150px; and overflow: hidden; in #Tabs #Content_Area could be factor.
Since you have overflow: hidden; set to "hidden", it could be a factor.
Try changing it to overflow:scroll; or overflow:visible; to see if that works, and/or changing the heights to a higher number for those IDs.
Try different variations.
I see a two possible causes:
The database query only returns 5 results
the DIV is not large enough, and even though the table ends up in,
say, 25 records, the first 5 are only displayed and the rest are
hidden by the boundaries of DIV.
It would help if you put some more PHP code or even the CSS of the #area.