Jump to content



Photo

Need .css expert advice

.css website code

  • Please log in to reply
11 replies to this topic

#1 flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 18 August 2014 - 19:46

Hello I created a website for our company using the system Abantecart. It is version 1.1.9.

When I set everything up I used the default html 5 template for the theme. I then modified that theme for a new look.

 

You may see the site here: http://www.hygienics.com

The problem I am having is that the site when viewed on an iPad or smaller devices is mostly out of whack. I ask you to look at it on a large desktop or notebook screen and then on an iPad.

This is responsive hence why the problem. I have the ability to create an additional store in the admin which I will do to make a mobile phone site. That will be done later but for now does anyone know how I could make this not responsive so on an iPad or smaller size it will not look jumbled?
 

I know iPads can make it all fit well if not responsive like the iPhone it does something where everything fits on the screen which is pretty cool. I have looked at all the .css code but it seems I am missing something. Feel free to study the code and let me know what I should try.

 

Thanks,




#2 LaP

LaP

    Forget about it

  • Tech Issues Solved: 4
  • Joined: 10-July 06
  • Location: Quebec City, Canada
  • OS: Windows 8.1 Pro Update 1

Posted 18 August 2014 - 19:50

does anyone know how I could make this not responsive so on an iPad or smaller size it will not look jumbled?

 
?
 
The point of a responsive design is to make it usable on phones and tablets without the need to zoom in and out. To have a ui not cluttered on small screens and/or bigger contents without the need to zoom in.
 
If it looks "jumbled" (is it even a word? what does it means?) it means the responsive design is not well made.

To remove the responsive design you need to remove the media queries like this one @media screen and (min-width: 480px) { } (keep the code inside the brackets). More works might be needed if the responsive design is flexible (fluid) grids too cause a flexible (fluid) grids design coupled with a responsive design will likely look like **** on a widescreen 1080p+ monitor (or the other way around it rarely looks good on both hd or lower res etc ...)



#3 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 18 August 2014 - 19:57

I know that. By default it could adapt to it using the theme that comes built in but when I modified things that is when it did not work well I just noticed. still it would be best non-responsive



#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 18 August 2014 - 20:11

Remove all @media parts in the css.

If it has print styles you can keep those print mediaqueries those are not part of the responsive css.

#5 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 18 August 2014 - 20:18

Thanks Seahorsepip. So just removing @media will leave it how should I say static?


Also I should mention that there are several .css files. So I guess I would remove them from all of them correct?  I will be making a backup just in case of all the files.



#6 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 19 August 2014 - 15:58

I was able to make the default html 5 template not responsive for now. I still have one issue I cannot figure out.

If you go to www.hygienics.com and look at the site full width you will see it is OK. When you resize the browser nothing gets jumbled anymore but you will notice the header and footer only go from left to right a certain width. It does not go across and fill the space.

If you open the browser a little more by dragging the sides you will see it starts to move. I really would like it to fill it 100% without being cut off. I added in the .css width:100% and it did not work.

What does work is if I add a size in px like 1000px but that is not always accurate so I would rather have 100%.

I am not seeing something in the code. Perhaps someone can tell me what it is.

Thanks



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 19 August 2014 - 16:43

.headerstrip .container {
background: #A6CEE3;
height: 72px;
width: 1210px;
}
.headerstrip {
background: none;
}

Add above css to your stylesheet.

And the website design is not really good by the way :/



#8 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 19 August 2014 - 17:01

OK. May I ask why you say that?



#9 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 20 August 2014 - 14:38

OK. May I ask why you say that?

The design looks a bit outdated and is not something a user remembers at all, I would recommend using a primary color and not too much unnecessary colors.

I can make a quick example if you like.



#10 Krome

Krome

    Neowinian God!

  • Joined: 29-August 01

Posted 20 August 2014 - 15:00

yeah... I am not fond of the layout...



#11 OP flynempire

flynempire

    It's called the bat and yes Mr. Wayne it comes in black :)

  • Joined: 19-January 10
  • Location: Sunny - Miami, FL
  • OS: Windows 7 Pro SP-1, Windows 8.1 (RT) Android 4.1.2 Windows 8.1 Up1
  • Phone: Samsung Exhibit (Latest Model)

Posted 20 August 2014 - 18:47

Thanks for the input. Well I did this based of the template that comes with the cart. If you can show me an example please go ahead.. One of things I did was try and make things big since a lot of older people will probably visit because of continence issues.



#12 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 27
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 21 August 2014 - 17:58

Thanks for the input. Well I did this based of the template that comes with the cart. If you can show me an example please go ahead.. One of things I did was try and make things big since a lot of older people will probably visit because of continence issues.

Tried to make a quick mockup of a simpler site:

t0kv8.jpg