Multiple Issues To Fix

Issue 1: On the home page (and all other pages I’m sure), there is a white space between the content and copyrights footer that I would like removed.

Issue 2: On my gallery pages (eg. https://bumpstobabies.com.au/newborn/) I’m using the images gallery element and have it set to display 3 images per row which it is displaying correctly on desktop but on the phone is displaying as 2 columns. I would like it to display as 1 column on the phone. In saying this though, I want my products on the shop page to remain displaying 2 products per row on mobile.

Issue 3: On the top of every page there is a white space beneath the title which I would also like removed. Also I had the sports demo layout for my homepage where the row of information boxes overlapped the slider (which I’ve changed to an image) and I really loved how that looked on desktop, however on mobile the first info box was practically covering most of my main image. Is there a way to have it overlapping on desktop (-140px margin) but not on mobile?

Issue 4: On my pricing page (https://bumpstobabies.com.au/pricing) the sections titled “DIGITAL ONLY COLLECTIONS” “COMPLIMENTARY MATERNITY SESSION” & “OUR PAYMENT OPTIONS” are not middle aligned to their sections on both mobile and desktop. All of the other sections look great, just those 3.

Thank you so much for your help in advance 🙂

Attachments:

You must be logged in to view attached files.

Hello,

1. and 3. WoodMart theme has top and bottom paddings for Main page wrapper in order to ensure WooСommerce templates nice view.
However, this padding causes the gap between the header and the main content on the home page of some of the demo pages. In order to get rid of it enter the page: Dashboard > pages > find the page > edit and set margin-top:-40px
Main page wrapper bottom padding visible and a white space between the pre-footer and footer occurs.In order to remove the gap, enter the HTML block, which is used in the Theme Settings > Footer > Pre-footer area and set margin-bottom: – 40px; to the row. If there are a few rows in the template, the margin should be set to the last one.

2. Please add this code to the Theme Settings > Custom CSS > Global:

.col-6.woodmart-gallery-item {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}

4. You need to enter the element and set the text alignment as per your needs or provide site admin access to the private area.

Best Regards

Best Regards

Thanks for that. With Issue 4, I mentioned the section not being middle aligned. I’m not trying to centre align the text. I’ve already set the row to have content middle aligned however the gaps on the top and bottom of those sections are not even.

Now after adding the code to the CSS for the gallery images, it’s changed the layout of the home page on mobile which I don’t want. I want the original layout of the images from the sport demo where the images are side by side

Hello,

With Issue 4 – make the row the full-height and make the columns of the same height

As for code CSS, please remove from Global and add to the Mobile section.

Best Regards

I did this (currently still there) and no change is made. Home page gallery element displaying as I want with the 2 columns, but the maternity, newborn and 6 month + gallery pages showing 2 I columns instead of 1 as I requested.

Hello,

Please contact the hosting support and ask them to clean the cache. This is the issue of the cache.

Please delete CMB2 and Redux Frameworks these plugins are no more necessary. https://xtemos.com/docs/woodmart/faq-guides/3-x-4-0-migration-guide/

Best Regards

Ok I’ll do that. Also with the contact form fields, they’re all touching each other, is there a way to add a space of about 3 or 5px between each one? If I add a line break in the form itself the space is too large.

I can now see the gallery pages displaying single image on mobile however I don’t think you’re understanding me. I only want /newborn /maternity and /sitter pages to display single on mobile. Now the home page ones aren’t displaying as 2 columns 🤦🏻‍♀️

I want the pages to display as pictured in the attachments, but with your code it makes them ALL 1 column display on mobile

Hello,

Enter the page and insert the code into Page settings area https://prnt.sc/qm1m1d to make it effective only on the certain page:

@media (маx-width: 576px){
body .col-6.woodmart-gallery-item {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}

Ask your host support to disable the cache for the while.

In order to correct the contact form, add this code:

.form-style-rounded input[type=text], .form-style-rounded input[type=email], .form-style-rounded input[type=password], .form-style-rounded input[type=search], .form-style-rounded input[type=number], .form-style-rounded input[type=url], .form-style-rounded input[type=tel], .form-style-rounded input[type=date], .form-style-rounded select {
    margin-bottom:20px;
}

Best Regards

Thanks, form code worked, however image issue still not fixed 🙁 I put the css on the page settings as you said and despite cache cleared its still showing 2 columns on mobile.

Also, how can I make the form fields square cornered instead of rounded?

Hello,

I have corrected the code. Please check.

Best Regards

[Author]

Posts