Announcement

Collapse
No announcement yet.

Help with HTML Code

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Help with HTML Code

    I need some help and I don't want to mess up my template so I hope someone can help me. I have an image I use that I need to make responsive and I noticed when I put it in the image carousel, it becomes responsive.

    I currently have my main homepage image here: DESIGN/TITLES & CONTENT/HOME PAGE/HEADER. This puts my image directly below the h1 header. I have a little text at the top and then the image is right below that.

    If I enable the image carousel, the image automatically gets placed above the h1 heading. In other words, the image is at the top, then the text goes right below that.

    I really want the text to remain OVER the image. Here's my current code in the home.html template. How would I fix this so the image goes below the text?

    If there is an easy was to just make the marchhome.jpg RESPONSIVE, that would even be better. It's responsive on my mobile site, but when I view it on my ipad, it's too big.

    Thanks!!
    <div id="mainContent"><section id="home">
    <!--START: home_carousel--><!--END: home_carousel-->
    <!--START: CATEGORY_HEADER-->
    <div class="category-header" id="homeHeader">
    <h1 align="center">We carry the largest selection anywhere!</h1><p style="text-align: center;">Welcome to our boutique!</p><p align="center"><img src="assets/images/HOME%20PAGE/marchhome.jpg" width="800" height="315" border="0" <br=""></p><p> <p=" style=" text-align:=" "="" left;"=""><span style="font-weight: bold;">Who We Are:<br>
    </div>

  • #2
    I looked at your homepage and the image is fine in ipad landscape view. It's only a problem in portrait view. Generally, you shouldn't have width and height inline in the html. Normally you'd have a media query in your responsive css file that would style the image size according to device. All that said, I understand that you're using a template and don't have a responsive.css file other than the 3dcart maintained file in the common folders so a simple fix would be this.

    Change this:

    Code:
    <p align="center"><img src="assets/images/HOME%20PAGE/march15home.jpg" width="800" height="315" border="0" <br=""></p>
    to this:

    Code:
    <div><img src="assets/images/HOME%20PAGE/march15home.jpg" width="100%" height="100%"> </div>
    On a side note, it looks like you're doing a lot of inline styling. Generally, especially with responsive design, it's best to leave styling up to CSS rules. Because you're only using CSS files from the common folder and don't have your own, you'll probably want to assign classes to DIVs that already have rules in the responsive.css, default.css or layout.css files.
    Last edited by bzeltzer; 03-30-2015, 01:01 AM.

    Comment


    • #3
      Oh my gosh THANK YOU!!! It works now! I'm so happy and so thankful for your help! :-)

      So in regard to the inline styling, I just bought that template from a designer and specifically asked that it be a responsive template so I'm mobile friendly. I'm a little confused and concerned. Is it not responsive? Are these changes something I can do myself? I don't even know what "assign classes to DIVs" means. I just have a very basic working knowledge of html.

      Comment


      • #4
        I also forgot to ask.... in layman's terms, how do a lot of inline styling affect a website? Does it hurt SEO, etc? Hope not - yikes!

        Comment


        • #5
          You're very welcome. Your site is responsive and will stay that way. Inline styling won't affect SEO in any way but it's old style web design that, down the road, could conflict with the way 3dcart's responsive templates work (especially when they do updates). You're fine for now and can always clean up some of the inline styling later if needed. In the meantime, you might want to make changes without using the inline styling. Generally, you shouldn't need to align too many things or specify width, etc. CSS rules should already be in place to control that stuff when you use basic paragraph or heading tags.

          If you want to be able to make changes to your site over time, I'd suggest learning a bit about what CSS, DIVs, classes and IDs are. After you get a little background, you may want to think about the implication of your site's CSS files being in the common folder (meaning that 3dcart will replace that file at the same time that they replace everyone else's). A lot of sites have additional CSS files in their individual template folder that over-ride certain changes 3dcart makes.

          I'm sure that this probably leaves you with more questions than answers but I guess that's how these things go...it's kind of a big subject. You can always try shaun at thecartdesigner.com if you need to pay someone to make changes.

          Comment


          • #6
            Thank you for your help again! I'll be contacting Shaun. :)

            Comment

            Working...
            X