I’ve a WooCommerce site and on mobile we’re getting strange empty spaces on product category pages. It seems to be ok on other archive pages though.
I’m thinking it could possibly be linked to the number of lines on a product title, but I don’t see why that should break it, or why it wouldn’t affect other pages.
I’ve go into Developer Mode (mobile) on browser and tried a few things – If I reduce the product title to two lines (same as other products on the same line) it fixes the gap. Alternatively, when I add clear:both to some of the product divs, it helps fix it.
Could it be that the template isn't specifying rows?
Example of the issue can be seen here on mobile: https://fusionworkwear.ie/product-category/softshelljackets/
I'm at the end of my tether on this one so any help would be hugely appreciated.
Set the min-height to 48px for class name product-title
Here is the screenshot of your site when I set min-height ,
But, still the space will be added under title. Or else you can add this code in your css file.
.row.products div:nth-child(4n+1) {
clear: left;
}
It works !
Related
I am having issues with getting the bbPress plugin full width, - if I create a new page called 'forum' or 'forums', and put the [bbp-forum-index] shortcode in on that page, and make the page setting full width no sidebar it seems to work.
Now, when I click on the forum category itself, it makes the forum then go to the left side, roughly 60% of page, leaving the right side untouched with no sidebar.
I've tried width; 100%; under .bbpress-forums, didn't work.
I've tried creating a new bbPress.php page, with the full width page template code in it, it also didn't work.
Picture of my issue;
https://image.prntscr.com/image/MlelT-DGSpSlLet6tBTTkw.png
I apologize if my question isn't clear, or if I'm missing something so simple, just can't wrap my head around this... Note that I don't know a whole lot about code but I know a little bit.
If it's any help, I am using;
bbPress v2.15.4
and Socialize by GhostPool as the theme.
EDIT: I've gotten half way! I've set "no sidebar" as the default option... now this is where I am stuck! https://image.prntscr.com/image/HONffga5SYq3DA6wi_CcxA.png
Can you provide the link to the website? As far as I can see on website for Socialize: Multi-Purpose BuddyPress Theme author sad that that he provided large, full-width and full page theme. Maybe you missed some option or just need some CSS tweak.
I am relatively new to wordpress so please do forgive any incorrect terminology or silly questions as I am still learning and eager to do so.
I have a jewellery website (running Kallyas premium) which I have a row of banner icons inbetween the header and rev slider.
top banner icons
The problem is when viewing the site on reduced screen size or mobile view I want to replace this row of icons with one single icon/slider which displays my banner icons one at a time eg. Lowest Prices, A* customer service so on and so on.
A good example of what I'm trying to achieve is on the Watchshop.com homepage when viewed in mobile view.
watchshop.com slider effect
I can't seem to find a plugin that does this and I can't seem to achieve this with rev slider, maybe it needs some code?
Any help will be gratefully received.
Thanks
Dan
you would need to add some css media querys to show and hide certain things depending on screen size, for example you want to hide the nav links at mobile:
try something like this:
#media only screen and (min-width: 768px) {
.your_class_her_or_id_here {
display:none;
}
}
this would hide the nav links when viewed at screen size less than 768px,
you could do the same for the slider, so it only shows at a certain size otherwise its not shown. Hope this helps.
I'm using magento and have tried refreshing indexes, clearing cache etc.
However, something weird is happening. Magento is displaying blank pages for Categories. There is a link on the page, because I can click on it, but it is not visible. There is also an H1 tag. However there is no product image, no text for the product link etc.
Its almost like magento cant find the CSS for the center of the page. Also I notice there is a long number before the CSS file e.g. /media/css/39328749837294823.css
Im wondering if anyone knows why this might be?
Cheers
K
The site I am maintaining has bugs in the header and widget blocks. How do I change this?
Search bar is out of alignment with nav menu.
News and Events widgets overextends if too much text is displayed.
a. The news widget is from an automatic feed.
http://cafes.calpoly.edu
One error only shows in Chrome browser. In Safari I at least don't see the News widget over extending but the search bar in the main header navigation menu appears to have a distorted div in all browsers.
I am new to Drupal but am pretty familiar with Wordpress.
Is there a module I can download to enable me to fix this? If so, what code snippet could I use to establish the proper parameters for these blocks?
1) Option one reduce li font size if client is ok with it
font-size: 0.75em;
This worked for me and you the search bar was fixed.
2) Second option is to trim the text length. There is only so much u can fit in those tight cells.
abt the news widget I don't see anything wrong.
There is no "CSS" module in Drupal. To fix the issues you've mentioned you need to make small changes in the css files. To fix the search box aligment you should reduce the font-size of the menu items.
You will need at least ftp access to the site.
When I added size variations to some of the products in my test store, the Product Options container automatically moved below the product image. I fixed the problem in Firefox, moving it to where I want on the right of the image using style="float..etc." as required, but the Product Options container refuses to move in other browsers. I've added screenshots to better explain what I mean.
Firefox [correct]:
Chrome/IE [incorrect]:
Link to Code
I've checked the DOCTYPE, I've used every possible combination of the display, position, float and margin functions I can think of but as yet no joy. Any and all help is greatly appreciated.
Edit css as follows:
form.product_form { width:390px; }
.product_description { clear: both; }