So I want to make my website easier to navigate. Especially on mobile. Our current set up is not helping our click through rate. I honestly think most of that has to do with mobile users. What I want to do is make my site work more like this one: http://www.onehorseshy.com/
Instead of just a homepage with navigation on the left, I would have images that are LINKS to our category pages. People can search with their eyes for the images and not just look for the text on the left hand side.
The biggest improvement of this would be how mobile works. Our mobile navigation is a drop down menu that I find not very easy to navigate. The images would display either 1 or 2 wide so users could navigate easier.
I have never edited my CSS before. Do I just put all of that into the CSS file into the template then use the HTML content in the “page editor” to add in my info?
You could use the methods in that article. You would of course need to edit the code to contain your content.
Or there are other variations on how to make “card style” links.
The flex example is a bit odd when the last row has fewer cards.
On this page I use flex with the flex-grow property allowing the last row cards to expand to fill. http://burtonstatherheritage.org/roll-of-honour
This is done as such that it does not require any media queries to re-arrange the card layout.* The flex properties of shrink, grow, basis and wrap take care of all that. It can cope with small screens and enlarged font sizes.
Flex is great, but it can be difficult and confusing even for those experienced with css, but once you get to know it, it can be quite powerful.
As a css beginner you may go for the simpler inline-block method.
I used inline-blocks on this page. http://burtonstatherheritage.org/history-calendar
Again it does not require any queries as the cards are small enough to fit on a small screen and wrap just like text. Although I used a set size and aspect ratio, they do still accommodate font zooming. Normally I don’t like to set a height, but in this case I don’t mind the overflowing text being hidden as it’s just a preview of the links content.
In my flex example, the height expands to accommodate the text content, with other cards on the row expanding to match the height of the highest on the row.
The best thing to do is give it a go. If you then run into problems and you can’t work it out for yourself (after trying), then ask.
They must have a separate mobile version, because that is not responsive.
*I have used a number of queries on the site, but none are related to the card layouts.
Well, I go to edit my CSS and I tried adding some of that CSS code to my “body” in the css settings of 3dcart and I got nothing. Do I need to add the code to a certain area?
Thats a snapshot of some of my CSS editor in 3dcart.
That means nothing to me, I don’t know the first thing about 3dcart.
Show me some html and css code and I’m happy.
There should be no problem creating a layout with picture links with text below.
So the problem bit looks like: How to edit the theme in 3dcart.
Well I can use the FTP and “view” and edit the full CSS file in notepad. The question is, where to put the code. I see in the file there is info about what the “sections” do. Do I go to the bottom and add me a new section then insert my new code and see if it works? What you saw in the screenshot was an “easy” css editor within 3dcarts admin login.
I might give that a try. I got my CSS to work actually. I think I could get that CSS to work also. It would make the images look even better than I have them now. Nice little shapes around them you have there.
The code is very nice, except when I added it to my sites CSS it messed up every page on my website. I had to remove it really quick. We close at 4:30 today. Can’t leave it like that until monday haha. Any idea why it would do this?
www.vitavibe.com is the original. I am guessing something in the CSS had a conflict with the other CSS already there.
You really shouldn’t be working on the live site like that. Work on a local version until you’re satisfied the code works correctly, and then upload it to the live version of your site.
3dcart isnt quite the same as normal HTML sites. I tried to localize it to just that one page but it did something to the site. I am going to try and see if I can do it offline. I don’t think it works that way.
I am not sure what the incompetent remark is about but I truly am new to this. I love to learn and mistakes are a part of life. If you want to not help and throw insults, do it elsewhere. We all have to start somewhere. I believe I can work hard and get it right. I have learned so much from the kind people of this site over the last couple of weeks. I spend hours each day reading about HTML and CSS coding. I feel like I have learned so much. There is a LOT I still do not know. I will update everyone on my progress once I try and get this to work again.
@oddz has a rather terse syntax, which can be rather tricky for the newcomer to get their head around.
What’s being suggested is that you create yourself an offline development/test environment within which you can recreate some or all of your site. That way, as you create new code you can test its effects out on a replica site, but do so without risking any damage to your live site. Once you’ve tested your new code out in the safe environment, and are happy it behaves as you want, then you can upload it to your live site.
Yes, I get that. 3dcart makes such normal ways of running a website difficult. I would love to test the code offline. I used to do that on my old sites. I have to figure out how to do that on my 3dcart sites now. I find a new reason to dislike the way 3dcart works about every day.
Like @sama74, I’ve no experience in 3dcart, but I recognise the type of setup. I can well imagine it’s not the easiest proposition to make changes on.
