Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
Thread Tools Display Modes
Share |
  #1  
Old 07-14-2016, 03:06 PM
Skyhawk Skyhawk is offline
Junior Member
 
Join Date: 05-13-09
Posts: 15
iTrader: 0 / 0%
Need Some Expert Help Fixing Responsive Site

First off, I am a novice at developing websites. I have a basic knowledge of html and CSS and am trying to learn more.

So I put together a new site that you can see at sharpstuff4guys.com and the problem I am having is that the #products area is not resizing the way I think it should. Basically half of the site resizes just as it should, but I am doing something wrong that won't allow the products portion to resize and I sure could use some expert help with this.

If any of the experts here are willing to take a look and offer suggestions, I would really appreciate it.

My html is as follows:

Code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <meta title="Unique, Collectable Assortment of Knives, Blades and Other Goodies For Guys"> <meta name="description" content="A growing collection of unique knives and blades and other goodies for the guy who has everything."> <link rel="stylesheet" href="screen.css" media="screen,projection,tv"> <title>SharpStuff4Guys.com</title> </head> <html> <body> <div id="contentWrapper"> <h1> <a href="/index.php"> SharpStuff4Guys.com <span><!-- image sandbag --></span> </a> </h1> <div id="shipping-bar"> <?php include("ship-bar.php"); ?> </div> <div id="content"> <div id="sidebar"> <?php include("nav.php"); ?> <div id="category">Categories</div> <ul> <?php include("categories.php"); ?> </ul> <!-- #sidebar --></div> <div id="products"> <h2>featured products</h2> <ul> <li> <a href="/copper_spring_assist_knife.php"> <img src="/images/copper_spring_assist_knife.jpg" alt="Copper Spring Assist Knife" /> <h3> "Stars Above" Copper Spring Assist Knife w/ Wolf Handle </h3> <span class="retail-price"> Retail Price: $26.49 </span> <span class="price"> Your Price $20.74 </span> </a> </li><li> <a href="/baseball_style_vietnam_veteran_cap.php"> <img src="/images/vietnam_cap-1.jpg" alt="vietnam veteran cap" /> <h3> Baseball Style Vietnam Veteran Cap w/ Adjustable Back </h3> <span class="retail-price"> Retail Price: $19.99 </span> <span class="price"> Your Price: $ 7.75 </span> </a> </li><li> <a href="/death_stalker_fantasy_knife.php"> <img src="/images/death_stalker.jpg" alt="death stalker fantasy knife" /> <h3> "Death Stalker" Fantasy Knife w/ Display Stand </h3> <span class="retail-price"> Retail Price: $78.49 </span> <span class="price"> Your Price $57.74 </span> </a> </li><li> <a href="/biohazard_zombie_hack_n_slash.php"> <img src="/images/zombie_hack_set.jpg" alt="Biohazard Zombie "Hack 'n' Slash" 4 Pc Set" /> <h3> Biohazard Zombie "Hack 'n' Slash" 4 Pc Set </h3> <span class="retail-price"> Retail Price: $109.99 </span> <span class="price"> Your Price $60.43 </span> </a> </li> </ul> <h2>new arrivals</h2> <ul> <li> <a href="/guthook_fixed_blade_knife.php"> <img src="/images/guthook_knife.jpg" alt="7-in Fingergrip Guthook Fixed Blade Knife" /> <h3> 7" Fingergrip Guthook Fixed Blade Knife </h3> <span class="retail-price"> Retail Price: $15.99 </span> <span class="price"> Your Price $6.25 </span> </a> </li><li> <a href="/damascus_wedge_knife.php"> <img src="/images/damascus_wedge.jpg" alt="8-in DAMASCUS WEDGE with OLIVE WOOD/HORN HANDLE" /> <h3> 8" Damascus Wedge with Olive Wood/Horn Handle </h3> <span class="retail-price"> Retail Price: $61.99 </span> <span class="price"> Your Price $46.87 </span> </a> </li><li> <a href="/american_flag_knuckle_belt_buckle.php"> <img src="/images/american_flag_knuckle_belt_buckle.jpg" alt="american_flag_knuckle_belt_buckle" /> <h3> Patriotic American Flag Knuckle Belt Buckle </h3> <span class="retail-price"> Retail Price: $15.99 </span> <span class="price"> Your Price $11.67 </span> </a> </li><li> <a href="/boker_arbolito_soul.php"> <img src="/images/boker_arbolito_soul.jpg" alt="Boker Arbolito Soul II Buffalo Fixed Blade Knife" /> <h3> Boker Arbolito Soul II Buffalo Fixed Blade Knife </h3> <span class="retail-price"> Retail Price: $249.00 </span> <span class="price"> Your Price $141.47 </span> </a> </li> </ul> <h2>best sellers</h2> <ul> <li> <a href="/scorpion_handle_fantasy_bowie_knife.php"> <img src="/images/fantasy_bowie_knife.jpg" alt="Scorpion Handle Fantasy Bowie Knife" /> <h3> Scorpion Handle Fantasy Bowie Knife w/Sheath </h3> <span class="retail-price"> Retail Price: $21.49 </span> <span class="price"> Your Price $15.83 </span> </a> </li><li> <a href="/jolt_mini_stun_gun.php"> <img src="/images/jolt_mini_stun_gun.jpg" alt="JOLT 35,000,000* Mini Stun Gun - Black" /> <h3> JOLT 35,000,000* Mini Stun Gun - Black </h3> <span class="retail-price"> Retail Price: $26.49 </span> <span class="price"> Your Price $21.11 </span> </a> </li><li> <a href="/vietnam_commemorative_knife.php"> <img src="/images/vietnam_commemorative_knife.jpg" alt="Vietnam War 1960-1975 Commemorative Folding Knife" /> <h3> Vietnam War 1960-1975 Commemorative Folding Knife </h3> <span class="retail-price"> Retail Price: $15.99 </span> <span class="price"> Your Price $11.92 </span> </a> </li><li> <a href="/classic_lockback_folder_knife.php"> <img src="/images/classic_lockback_folder.jpg" alt="5-in Classic Lockback Folder" /> <h3> 5" Classic Lockback Folder </h3><br /> <span class="retail-price"> Retail Price: $10.49 </span> <span class="price"> Your Price $7.64 </span> </a> </li> </ul> <!-- #products --></div> <!-- #content --></div> <div id="description"> <p>If you are looking for a great place that offers a huge selection of knives, self defense products or collectibles, then SharpStuff4Guys.com is the place you want to be. Whether you're looking for fantasy knives, fixed blade knives, folding knives or protective zombie gear, we have most everything a guy could need to build an amazing collection and at very affordable prices. Our selection of self-defense and security products, collectibles and survival gear has been hand-selected to satisfy the wants and needs of our customers. Each item in our inventory meets our rigid standards for durability, functionality and ease-of-use. Here at SharpStuff4Guys.com, we are building one of the most comprehensive selections of name-brand knives and combat accessories that grows every week. Our inventory is loaded with knives from manufacturers like SOG, Gerber, Colt and Ka-Bar - just to name a few. We offer at discounted prices Uzi knives, Swiss Army knives and many more, so finding the right blade for your personal collection couldn't be easier. In addition to our growing inventory of knives, SharpStuff4Guys.com's inventory includes tactical gear and militaria. So whether you're looking a gift that will never be forgotten or adding to your own personal collection, you will be able to get what you need right here. Because we live in such turbulent times, we have packed our inventory with an amazing selection of self-defense and security products that can protect you if the need ever arises. Whether you're looking for a Mace pepper spray gun, a crime-stopping, 4-million-volt stun gun or a motion-detecting alarm, you'll find things that law enforcement personnel and self-defense instructors use and recommend right here at SharpStuff4Guys.com. We'd like to invite you to browse our ever growing selection of unique knives, discount tactical gear and everything else we offer. At SharpStuff4Guys.com, we are quite proud of our selection, and hope you enjoy exploring our website for whatever it is you need.</p> <!-- #description --></div> <div id="bottom-menu"> <ul> <li><a href="/">HOME</a></li> <li><a href=" / ">SHIPPPING</a></li> <li><a href=" / ">RETURNS</a></li> <li><a href=" / ">BACK ORDERS</a></li> <li><a href=" / ">PRIVACY POLICY</a></li> <li><a href=" / ">Contact Us</a></li> </ul> <!-- #bottom-menu --></div> <div id="footer"> <p>All contents &copy; 2016 SharpStuff4Guys. All rights reserved.</p> </div> <!-- contentWrapper --></div> </body> </html>
And my CSS looks like:
Code:
/* null margins and padding to give good cross-browser baseline */ html,body,address,blockquote,div, form,fieldset,caption, h1,h2,h3,h4,h5,h6, hr,ul,li,ol,ul, table,tr,td,th,p,img { margin:0; padding:0; } img, fieldset { border:none; } /* fix for legacy iOS and windows Mobile devices */ @media (max-width:512px) { * { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* fix for HDX displays like the Kindle Fire HDX */ @media (-webkit-min-device-pixel-ratio:2) and (min-width:1600px), (min-resolution:172dpi) and (min-width:1600px) { html { font-size:200%; } } body { background:#BFCDE4; } #contentWrapper { max-width: 72em; /* h1 logo image width for legacy browsers */ margin: 0 auto; overflow:hidden; background: #FFF; -webkit-box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; box-shadow: 0 0 1px 1px #000, 0 0 1.5em 0.1em #321; -webkit-border-radius: 1em; border-radius: 1em; } * html #contentWrapper { width:55em; /* IE6- can't do min/max-width, OH WELL! */ } h1 { padding-left: 2em; font-size: 100%; /* prevent FF reverse inheritance bug */ background: #0067A9; -webkit-border-radius: 1em 1em 0 0; border-radius: 1em 1em 0 0; } h1 a { position: relative; /* so we can absolute position span over this */ display: block; padding: 40px 0; /* 40px top + 40px bottom + 64px line-height == image height */ text-decoration: none; font: bold 40px/44px arial,helvetica,sans-serif; color: #FFF; } h1 span { position: absolute; top: 0; left: 0; width: 100%; height: 120px; background: #0067A9 url(/images/header.jpg) center left no-repeat; } #shipping-bar { margin-bottom: 2em; background: #0000CD; border-top: 2px solid #000; box-shadow: 0 5px 5px #888888; } #shipping-bar p { padding: 0.4em 0 0.4em 0; text-align: center; font-size: 1.75em; text-decoration: none; color: #FD9742; text-shadow: -2px 0 4px #000, 2px 0 4px #000, 0 -2px 4px #000, 0 2px 4px #000, 0 0 8px #000; } #content { width: 100%; overflow: hidden; background: #FFF; } #sidebar { float: left; max-width: 12em; margin: 2em 1em 0 1em; font-size: 1em; line-height: 2em; padding: 0.5em; } #sidebar ul { padding: 0.5em; list-style: none; } #sidebar li { list-style: none; } #sidebar a { width: 10em; font-size: 1.1em; line-height: 1.1em; text-decoration: none; } #sidebar a:hover { color: #000; font-weight: bold; text-decoration: underline; } h2 { text-transform: uppercase; font-size: 1.5em; margin-bottom: -0.5em; padding: 1.65em 0 0.5em 0; } #category { margin: 1em 0 -1.5em 0; font-size: 1.5em; font-weight: bold; } #products { float: right; width: 53em; padding: 1em; background: #FFF; } #products ul { list-style: none; text-align: center; padding-bottom: 1em; } #products li { display:inline; vertical-align:top; } #products a { width:171px; padding:1em; display:inline-block; vertical-align:top; text-decoration:none; color:#FFF; -webkit-border-radius:1em; border-radius:1em; -webkit-transition:background 0.3s; transition:background 0.3s; } #products a:hover { background:#BFCDE4; } #products img { display: block; margin: 0.25em auto 0.5em; max-width: 100%; } h3 { font-size: 1.1em; font-weight: bold; color: #0067A9; padding-bottom: 0.5em; } .retail-price { margin-top: 0.75em; font-size: 1em; color: #666; } .price { font-size: 1.35em; font-weight: bold; color: #CC0000; } #description { clear:both; margin: 1.5em 0.5em 1.5em 0; padding: 2em 1em 1em 1.5em; } #bottom-menu { background: #0067A9; border-width: 2px 0; } #bottom-menu ul { list-style: none; padding-top: 0.25em; text-align: center; } #bottom-menu li { display: inline; vertical-align: bottom; } #bottom-menu a { display: inline-block; vertical-align: bottom; margin-bottom: 0.25em; padding: 0.5em 1em; text-decoration:none; font: bold 95%/95% arial,helvetica,sans-serif; color: #FFF; text-shadow: 1px 1px 2px #000, -1px 1px 2px #000; } #bottom-menu a:hover { color: #BFCDE4; text-shadow: 0 0 2px #C60; } #footer { text-align:center; padding:1em; height: 2em; background: #0067A9; } #footer p { color:#FFF; } #footer span { margin-right: 40px; } @media (max-width:50em) { body { min-width:192px; /* CSS3 possible, so let it go narrower */ } #contentWrapper, #sidebar { float:none; width:auto; } #content, #sidebar { margin:0; padding:1em 0.5em 0; } h2 { padding-bottom:0.66em; } #products { padding:1em 0 0; margin:0 0.5em; } #products a { padding:0.5em; } } @media (max-width:660px) { h1 { text-align:center; padding:0; } h1 a { padding:0.33em 0.167em; font:bold 300%/150% arial,helvetica,sans-serif; } h1 span { display:none; } } @media (max-width:340px) { #products a { width:auto; margin:0 auto; -webkit-box-sizing:padding-box; box-sizing:padding-box; } }
I have a feeling that the problem has something to do with the fact that I have #products wrapped by #content. I have tried removing #products, but then the images are all screwed up and I have no clue as to how to fix it.

Everything before and after this resizes fine. I just can't figure out how to fix the #products to be responsive and it is driving my nuts.

Thanks in advance . ..
 
Reply With Quote

Advertisement

Advertisement

  #2  
Old 07-16-2016, 11:53 AM
brogrammer30's Avatar
brogrammer30 brogrammer30 is offline
Junior Member
 
Join Date: 07-12-16
Posts: 32
iTrader: 0 / 0%
change #products width to a percentage, like maybe 90% and do margin 0px auto. I tried it on codepen and that seemed to fix your issue. Let me know if you have any more questions.
 
Reply With Quote
  #3  
Old 07-16-2016, 02:55 PM
Skyhawk Skyhawk is offline
Junior Member
 
Join Date: 05-13-09
Posts: 15
iTrader: 0 / 0%
Quote:
Originally Posted by brogrammer30 View Post
change #products width to a percentage, like maybe 90% and do margin 0px auto. I tried it on codepen and that seemed to fix your issue. Let me know if you have any more questions.
Thanks brogrammer.

I tried everything except that and by changing the #products width to 76% that did the trick.

But now I have a couple of more questions . . . if you don't mind.

First (keep in mind that I am a novice and still learning), why didn't having the #product width set at 55em work? I was under the impression that responsive was based on measurements of em or %. Did I miss something with this?

Second, after changing the #product width to a % and seeing how the page looks on my Galaxy S6, the images seem to be offset to the right. How can I make the images center up more?

Finally, where or how can I go to learn a different way to do my sidebar? I know that I am not asking this correctly, but if you look at the site amazingbarbeque.com and resize it, the nav menu changes from a list at desktop to something like a switch in the title area and learning how to do that interests me.

Again, many thanks for your advice. Now I can stop pulling what little hair I have left out. LOL

Last edited by Skyhawk; 07-16-2016 at 03:09 PM.
 
Reply With Quote
  #4  
Old 07-16-2016, 05:26 PM
brogrammer30's Avatar
brogrammer30 brogrammer30 is offline
Junior Member
 
Join Date: 07-12-16
Posts: 32
iTrader: 0 / 0%
You are correct that em is used for responsive design, but I believe that it is strictly relative to the font size, while percentages are relative to the parent. I rarely, if at all use em's so I might be incorrect about that though.

For the images, did you do margin: 0px auto and/or text-align: center?

There are several ways to achieve the responsive navbar, but my favorite approach is to create two separate navigation bars: one for a desktop/laptop and another one for mobile. You basically just do display:none to the responsive hamburger one. Then you do your @media query for whatever size you want it to be a the hamburger menu and show it, while hiding the original one for laptops. I hope that made sense to you.

And don't worry about being a novice. We've all been there at that point, which is why I'm more than happy to help out
 
Reply With Quote
  #5  
Old 07-18-2016, 03:13 PM
Skyhawk Skyhawk is offline
Junior Member
 
Join Date: 05-13-09
Posts: 15
iTrader: 0 / 0%
Thanks so much for all your help. Hopefully I will figure most of this stuff out some day.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Looking For Someone to Make Site Responsive commoditytrainer Buy Web Services 3 04-22-2013 03:35 PM
WP Expert available for customization / bug fixing / development projects @ low rates phpsundar Sell Web Services 1 11-08-2012 05:46 AM
Fixing 4XX errors on site jpf566 SEO Forum 7 02-28-2012 10:36 PM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 09:58 PM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2018 VIX-WomensForum LLC