Jump to content

[Resolved] shop by category


Recommended Posts

I thought I had this issue fixed. It is somehow broken again. This is a new installation of the newest version. Foundation template. Basic changes is all I have done. On the mobile version it will only show one category. The spot where it should evidently say "Shop By Category" does not display unless you hit the bar numerous times and somehow hit it precisely at the right moment to get it to actually say Shop By Category. I am at my wits end. This sad part is I only have 2 categories. Any help is appreciated. https://www.dawggone.online/index.php

Link to comment
Share on other sites

I've been looking at your site, and I see that you have removed (or commented out, or CubeCart has decided to just not show them) several parts of the header contents.

I haven't found it yet, but I am wondering if there is a loss of row - column(s) - row - column(s) arrangement.

 

Link to comment
Share on other sites

The observed behavior is due to how the browser has been instructed to render it, based on the HTML and CSS sent to it.

So, I will be able to compare what the browser gets from your page and what the browser gets from a stock Foundation skin.

 

Link to comment
Share on other sites

I did add some css to the default. This is my cubecart default:
/* Use this to add specific CSS for this subtheme */
.inner-wrap { background-image: url("../images/paw-print.jpg"); }
.off-canvas-wrap  { background-image: url("../images/paw-print.jpg"); }
background-repeat: repeat;
button, .button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 0;
  border-style: solid;
  border-width: 0;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  line-height: normal;
  margin: 0 0 1.25rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  padding: 1rem 2rem 1.0625rem 2rem;
  font-size: 1rem;
  background-color: #E4FFDF; transparent;
  border-color: #2285a2;
  color: #E4FFDF;
  transition: background-color 300ms ease-out; }
button.info, .button.info {
    background-color: #E4FFDF;
    border-color: #61b6d9;
    color: #333333; }
    button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
      background-color: #61b6d9; }
    button.info:hover, button.info:focus, .button.info:hover, .button.info:focus {
      color: #CCFFC5; }
button.large, .button.large {
    padding: 1.125rem 2.25rem 1.1875rem 2.25rem;
    font-size: 1.25rem; }
     button.small, .button.small {
    padding: 0.875rem 1.75rem 0.9375rem 1.75rem;
    font-size: 0.8125rem; }
    
    .new-header-top {
    color: #008000;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-weight: normal;
  font-style: italic;
  font-size: 2.725rem;
  line-height: inherit;
  margin-bottom: 0.5rem;
  margin-top: 0.2rem;
  text-rendering: optimizeLegibility; }
  small {
    color: #008000;
    font-weight: normal;
    font-size: 50%;
    font-style: italic; }
    
/* Label Styles from foundation.cc line 1353*/
label {
  color: #4d4d4d;
  cursor: pointer;
  display: block;
  font-size: .875rem;
  font-weight: normal;
  line-height: 1.250;
  margin-bottom: 0;
  /* Styles for required inputs */ }
  label.right {
    float: none !important;
    text-align: right; }
  label.inline {
    margin: 0 0 1rem 0;
    padding: 0.5625rem 0; }
  label small {
    text-transform: capitalize;
    font-size: 50%;
    color: #676767; }

Link to comment
Share on other sites

I changed the css to
.inner-wrap { background-image: url("../images/paw-print.jpg");
background-repeat: repeat; }
.off-canvas-wrap  { background-image: url("../images/paw-print.jpg");
background-repeat: repeat;}

I am hoping that was what you meant. It still functions but the category issue is not resolved.

Link to comment
Share on other sites

Of your edits to foundation.css, I see that you made the change but also put the original values in a comment block.

Please look carefully at those comment blocks and make this change (one example given below):

You have: {* lms was 0.875 *}

Change to: /* lms was 0.875 */

The syntax of the comment block you are using is for a Smarty template. Please use the syntax for CSS files.

I have not yet verified this is the cause of the problems being observed.

Link to comment
Share on other sites

Keep in mind that the browser you are using keeps copies of CSS, javascript, and image files - a page's resources - in its own local cache.

If one changes the contents of a page resource, but not its filename, the browser will likely use the version in its local cache.

To force your browser to fetch all new copies of a page's resources, the typical way is the keyboard shortcut CTRL-F5.

I am still finding this syntax error at five locations. Are you sure you uploaded the stock foundation.css file?

I removed those five CSS syntax errors (yes, I can make changes to the CSS file being used by my browser for immediate effect) and your site is behaving correctly.

Edited by bsmither
Link to comment
Share on other sites

OK, I think the real issue lies with my file transfer program. I cleared the cache on the site and my browser. Uploaded the original foundation.css again but it skipped the transfer because it evidently thought the files matched. I had to delete the file from the site and then upload. (I guess that was the issue before when I uploaded the original.) It is now functioning on my phone. :-D You are awesome!! Many thanks!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...