goutresolve

That’s exactly what I needed. Thank you so much.

Thank you for the help. I really appreciate it.
That actually looks really good and upon initial inspection there a couple issues:
The “sale” badge is floating on the right side of the thing instead of it being attached to the left side
There still aren’t any product boxes around these. Not sure if that was addressed or not.

Sorry for taking so long to respond. That seems to have helped the formatting between desktop and mobile. Here is the test page that I’m working on. The code is at the bottom. http://www.GoutResolve.com/home-test

Here are the tweaks I’m trying to do now.
I’d like to make borders around each of the divs so that each product has its own box. How would I do that?
I’d like to center the products and text over the “add to cart” button. I had previously used this code and it stopped working when I implemented the code above. Any idea how to implement it so that both things work?
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img
{margin: 0 auto 8px}

.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h3
{text-align:center}

.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a
{margin:0 0 0 18%; min-width:100px; width: 50%; text-align:center}

Last, I’d like to make the products themselves bigger. When viewing on mobile they are perfect but when viewing on desktop they are really small. Any way to make them larger?

That worked. Thanks!

Will that mess with the other tweaks that I’ve done? I have copied the current tweaks that I’ve done on the site.

.home .entry-title {
display: none;
}

#logo {
width: inherit;
}

body, #wrapper {
min-width: 950px !important;
}

#site-description {
font-size:145%;
color: #000;
font-align:center;
}

h1{
font-size: 200%;
color: #09f;
}

h2{
color: #09f;
font-weight: bold;
}

h3{
color: #000;
}

.tablepress-id-3 tbody td {
vertical-align: middle;
}

.tablepress-id-4 tbody td {
vertical-align: middle;
}

.tablepress-id-7 tbody .column-1 {
background-color: #ddd !important;
}
.tablepress-id-7 tbody .column-2 {
background-color: #ddd !important;
}

.tablepress img {
max-width: none !important;
}

ul{
font: inherit;
}

All that seemed to do was move the menu bar to the middle of the page.

My website is http://www.goutresolve.com
I want it so that there is no mobile view. Want it all to look the same on desktop and mobile. It’s a very basic site so I wouldn’t think that should be a problem as far as functionality.