Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2013
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Resizing screen so images not overlapping

    Hi,

    On my site www.albafitness.com, whenever I reduce the screen size, some images overlap and a menu button appears which doesn't work, and the header image is cut short.

    Could someone tell me how to fix this? So the website doesn't do this.

    Thanks

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    What do you want the page to do? Do you want to make the images smaller so they don't overlap or drop down?
    Evolution - The non-random survival of random variants.

  • #3
    New Coder
    Join Date
    Aug 2013
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I want everything to shrink into the size of the browser, if that makes sense? Anything so that it doesn't over lap and go smaller.

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Your images are inside of a div inside of a div.
    Code:
    <div class="left13">
    <div class="textwidget"><a href="http://www.albafitness.com/whatweoffer/">
    <img src="http://www.albafitness.com/wp-content/uploads/2013/08/Whatweoffer.jpg"  /></a>
    </div>
    </div>
    Try adding a percentage width to the outer div:
    Code:
    <div class="left13" style="width:27%;">
    or better, find .left13 in one of the CSS files and change it there.
    Evolution - The non-random survival of random variants.

  • #5
    New Coder
    Join Date
    Aug 2013
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where do I add the percentage too?

    Brand new to all this, sorry.

    Where are the divs that I can edit?

  • #6
    New Coder
    Join Date
    Aug 2013
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another question I have is - On the Contact page, I've added a contact form. I want it to be in line with the text above, but I cant seem to edit it.

    On firebug it says it's in a widget.css but I can't find anything.

  • #7
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Because your using vCita forums for your site it's hard to find anything.
    Change this in your contract page
    FROM:
    Code:
    <p><span style="font-size: x-large;">Get in touch</span></p>
    On line 113
    TO:
    Code:
    <p style="margin:100px 0 0 150px;"><span style="font-size: x-large;margin: 0 auto;">Get in touch</span></p>
    Evolution - The non-random survival of random variants.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,038
    Thanks
    23
    Thanked 589 Times in 588 Posts
    I can't find where the CSS file is either. So in your main page at line 26/27/28(added line) add the line in blue:
    Code:
    .es-carousel-wrapper{ background-color:#FFFFFF;}
    .footer{ background-color:#FFFFFF;}
    .left13{width:27%;}
    Evolution - The non-random survival of random variants.

  • #9
    New Coder
    Join Date
    Aug 2013
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed it!

    All I had to do was split the page in half. Thanks for all the help though!

    Any tips on how I can fix the re-sizing issue?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •