I am trying to resolve this problem for day and I found solution, but it is not as I imagine and what I would like to have, so I am reaching for greater and smarter minds here :)
I have web shop that is showing one product per row on mobile layout, like here:
enter image description here
but I would like to see it two in a row. Now, this is the problem: in Configuration of Virtuemart, showing products per row is set to 3, because I would like to see 3 products per row on computer and desktop devices (also laptops and bigger tablets), so this is OK and everything works fine.
But on mobile devices, in template mobile.css this is set always to show 1 in a row.So I searched and I found code
.category-view .vm-col-3
that is set to width: 100%
When I insert this to 50% I get this:
enter image description here
I insert clear: noneand float: leftnothing happened. So I figure it out I have to find some .row code, because I see that this is 3 products in a row like it is set in Configuration, only now it is smaller and sorted like this, but still not like I would like to have.
Then, I found line that sets the row:
.category-view .browse-view .row
and inserted this line:
clear: none;
float: left;
width: 50%;
With this, results are the closest, but still not what I need.
Always when it ends 9 products, next 3 are one under another (3 products) and then again starts with two in a row and repeats after 9 products.
You can see it here (with mobile phone): box2.appleoprema.com/index.php/iphone6-maskice-i-zastita
Can someone tell me please, how to fix this?
I have try many ways and codes to figure this out, and after 3 days I just don’t know what to do anymore.
Thanks in advance for help.
Hi there after having a look it seems that the structure of the container is like this
row
col-1
col-2
col-3
row
etc...
so adding width: 50%; to the row messes up everything because there are 3 products assigned to each row.
What you can do is either have width: 33% to .product.vm-col.vm-col-3 for media="(max-width: 640px)" to display 3 products per row or leaving it as it is so that the column gets 100% of the width showing 1 product per row.
If you want to have 2 products per row for mobile display probably you should either check in the backend if there is such option or tweak the html of the component/module that you are using.
Related
I am having a problem with this widget. Wordpress Product Categories Widget On the website, vivahair.ro/shop you can see it on top, called "Selecteaza o Cateorie". When it is collapsed, dropdowned, it only shows 5 rows.
Is it possible to display it like 90% of vizual height? Or at least 10-15 rows.
Thank you in advance.
You can change the max-height: 200px; to a larger value of this class
.select2-container--default .select2-results>.select2-results__options.
It will display more rows.
I am building an Advanced HTML/PDF Template in NetSuite to be a check with voucher (check on top). Everything works well until the number of voucher items overflows on to the next page. The table logically resumes at the top of the subsequent page. But because of the check stock we are using, it would ideally resume 1/3 of the way down the page on the next "stub" section.
If I was only printing 1 check at time, I could use a header that doesn't apply to page 1 to push things down on page 2 and be good. But when multiple checks are printed at once, this doesn't work.
I also attempted to add a large, blank thead row on the voucher table to push the table down when it resumes on page 2. The check itself is absolutely positioned on the page. So I also was planning to absolutely position the voucher table so they overlap on page 1 and the proper space is created on page 2. But this did not work because I can't make the table absolutely positioned.
<body> kid can't be absolute: Ignoring <table class=[...
I'm guessing there is likely a simple solution or otherwise creative workaround.
Resetting the page number on the page break for each individual check ended up being my answer.
<pbr pagenumber="1" />
https://bfo.com/products/report/docs/tags/tags/pbr.html
<style>
#page2,
#page3,
#page4 {
header: blankheader;
header-height: 260pt;
}
</style>
<macrolist>
<macro id="blankheader">
<div />
</macro>
</macrolist>
I've been trying to figure this out all day but have reached my code knowledge limit as I try to change the child theme to achieve this.
Here's an image showing what my site currently displays, next to an image of the desired result.
What I have VS What I want
I've tried using a few snippets of code I've found on the Stack Exchange that remove Woocommerce descriptions but with no luck. I'd like to remove the gap, the description title, but must keep the description box itself because that's what allows the tabs at the bottom of the page.
Here's a link to the page itself, I can find and isolate the gap and fix it using the html, but I've no idea how that relates to the CSS (I'm new to this) Link : https://folduptoys.com/product/space-garden-playset/
Here's how it's currently set up, I'm using the Salient theme, with the 'Product Tab Position' set to 'Fullwidth Under Images'.
Any help would be really appreciated. Thank you x
-Alex
Here's what will work but it's important to note that if other tabs show up, like 'Attributes' or 'Dimensions' that they'll be visible, but the `Description' tab won't be. So you'll have to consider whether you want it to work that way or not.
There's two things going on, first, the margins on the tab menu were big. 70px on top and 50px on the bottom. Seems too large in my opinion but I long ago gave up guessing on why Salient's devs do anything.
The second thing is to hide the 'Description' tab. If other tabs end up being present though, they'll show up in it's place.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
margin:0 auto;
}
#tab-title-description{
display:none;
}
If what you want is to entirely remove the tabs navigation, meaning that if other tabs are there, no one will be able to see/access them, so not a good idea unless you're also modifying the tab content layout so that they all display, then use this to hid that whole bar.
div.product .woocommerce-tabs .full-width-content[data-tab-style="fullwidth"] ul.tabs{
display:none;
}
It hurts me to have to ask this question here, but one full day of searching through the internet didn't get us an answer so far.
Like you can see, the content is stuck on the left side.
Adding the CSS .od-ClientFormFields-fieldsContainer {
max-width:100% !important;
} didn't have any effect. It does still limit the max-width to 378px. I just want to strech it to full width. Just this list, just on this page. Coming from PHP, I expected 5 minutes work max. Now a day is lost and I hate MS a little more...
Update:
in my display form (DispForm.aspx), I added my style from above below the given style:
<SharePoint:StyleBlock runat="server">
.ms-bodyareaframe {
padding: 8px;
border: none;
}
In this form, I can see just some lines (108) of code. Am I looking in the wrong place? I tried to create a new DisplayForm, but in the end it was nasty. The list was placed centered and didn't work properly. I couldn't even edit it.
Plus I've had another menu there, which I didn't have in my original DispForm.aspx, just "edit all". At that point, I stopped. I just want the list to be wider.
I have an Rails app I am building with Foundation. I am having trouble figuring out how to display an arbitrary number of columns per row and keep it responsive in the small/medium/large layouts.
For example, lets say I have a model Department which has many Employees. I am trying to build the department page and display a list of the employees in the department. One department may have 10 employees. Another may have 6. It's arbitrary.
I want to do 4 columns in large, 2 columns in medium and 1 column in small. (See my wireframe below). However, the columns need to be wrapped in a div.row. This requirement means I have either of the following two situations:
Case #1 (jsfiddle) I have 2 elements per row and the large layout only gets 2 elements because it is getting cleared by the .row.
Case #2 (jsfiddle) I have 4 elements per row and the columns don't clear properly when in the 2-column, medium layout because there are 4 in a row.
This seems like it should be a pretty standard situation but I cant seem to figure it out. How do I do this? Is Foundation the wrong tool?
Media Queries and CSS might do the trick:
// medium
#media only screen and (min-width: 40.063em) and (max-width: 64em) {
.row > div:nth-child(2) {clear: left;}
}
With 4 elements per row
http://quirksmode.org/css/selectors/nthchild.html
http://foundation.zurb.com/docs/media-queries.html