Dimension main

This topic is: not resolved

This topic contains 15 replies, has 3 voices, and was last updated by  rossoblu 3 years, 9 months ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #3420

    rossoblu
    Participant

    Hi guys!

    As you can see I have a problem on my websites (http://img89.imageshack.us/img89/8506/k2c.png);  i don’t understand why  #main (or content or container, i don’t know!) don’t show all the text in home page!

    Any suggestion to resolve this problem?

    Actually the site is under costruction…so there’s a lot of things to do!!                                                           Thank you and sorry for my English!!

    #3421

    Martin
    Participant

    Not easy to see from the image. If you can give a link I think that will make it easier to see what the issue is.

    #3422

    rossoblu
    Participant
    #3423

    Martin
    Participant

    Looks as if you have a height of 100% on the #main. If you remove that should be OK. Could be more issues but try that first.

    #3424

    rossoblu
    Participant

    So easy…!! I was sure I tried…however, thank you!!

    #3426

    rossoblu
    Participant

    ok…now I have another problem!

    How can i make that menu, footer, the imagine on right, content, branding… don’t change its position when the resolution will be change?

    #3427

    Martin
    Participant

    I think you are asking about the site being viewed on different screen resolutions? (Smartphone, tablet, desktop etc.) How to make the image, the footer etc., change dimensions? If this is the issue then (short answer) you will need to style the elements in percentage widths and then with media queries change the layout. There is a learning curve in this but once grasped is not too difficult. Scott’s site http://scottnix.com is well worth looking at, and that site is a responsive child theme.

    If I have understood the question and the answer seems a little complicated I would be willing to engage in some dialogue on how best to proceed.

    Thanks for writing in English… I am learning Spanish so know the pain of communicating in a second language.

    #3428

    rossoblu
    Participant

    Yes, you understood my question (thank you!!), but I don’t understood how to do what you wrote!! For this site it’s just necessary a desktop version, i tried to fix the elements in percentage widths but it doesn’t works, maybe for the media enquires??

    I looked Scott’s site, but it’s difficult specially for the English and because I don’t know from where starting! There’s another way (even more simple!) to fix the content, footer,…position when the resolution change?

    #3429

    Scott Nix
    Moderator

    You might have to provide more information, or some kind of example.

    I am not quite understanding what you are looking for, which is why I haven’t chimed in yet. Even a crude mock-up graphic or something may help, or example of another similar site. Any information will help, because right now I am confused. ;P

    #3430

    rossoblu
    Participant

    [Ok, i try to explain better!

    I have made the website on a pc with a 1268×1024 resolution and everything it’s ok. The problem is when the resolution change…look at this two image:

    1. http://imageshack.us/a/img534/4656/72.png
    2. http://imageshack.us/a/img10/1001/vgyd.png

    In the first image the logo rounded in red  is in the correct position.

    In the second image, where the resolution is higher, the same logo is moved to the right.

    The same thing happen for the content, the footer, the menu and for the content.

    All I want is that content, logo,…, don’t change their position (if it’s possible)!

    I hope that now it’s more simple understanding what I mean, but I’m studying English (I’m in London from 2 months!) and it’s very difficult explaining the problem!

    #3431

    Scott Nix
    Moderator

    The problem is the margins using percentages.

    Your Footer is 100% wide. If you use a margin with a percentage, that percentage will be based on the window size, so essentially it will move all around.

    For the footer you have.

    #siteinfo { margin:  20% ; }

    Remove that, and instead try.

    #siteinfo { text-align: center ; }

    I will also look at the header, which has more issues. But the key is the percentage on the margins is causing this.

    #3432

    rossoblu
    Participant

    Thank you Scott!! I will try to change all the percentage in px…in the meanwhile if you will look for something else wrong I would be very grateful!

    #3433

    Scott Nix
    Moderator

    Sorry, I got totally distracted with emails, twitter, codepen.io, etc.

    Looks like the header is still a bit off. The easiest way to remedy the issue would be to add a fixed width to that header since you aren’t using it for anything at the moment, this will provide a wrapping element to help position things, just add.

    
    #header {
     margin: 0 auto;
     width: 980px;
     z-index: 2;
    }
    
    

    You will have to re-position some things, but it will be easier. There are actually quite a few things that could be reworked, some of the math is off, but if you run into other issues, feel free to post them, with a live link that you provided it is easy to go in and make suggestions.

    #3439

    rossoblu
    Participant

    Ok, I added code and I looked to what was necessary to re-position (I’m not sure now it’s all ok!! :)); however, all seems to be ok with different resolution.

    The only problem is on mobile: as you can see from the link below, the text (arrow 1) filled half content. The other thing I don’t understand (arrow 2) is  why all the website is all on left (it happens only with mobile); do you know how can I fit it on the center of the page?

    http://imageshack.us/photo/my-images/855/vcdy.png/

    By the way you are really helpfull, I appreciate your advises!!

    #3443

    Scott Nix
    Moderator

    For some reason the header code you added has weird characters attached to it making it invalid CSS.

    Currently the site is riddled with problems, a few big ones are.

    1. You changed the default Thematic pages to be single column, there is already a template that does this, if anything you could have just added padding to that.
    2. A lot of the Math for your CSS is wrong, there are a bunch of box model errors (incorrect widths) which throw everything off.
    3. The logo is set to the #branding, really you would want that set to the ‘a’ element inside the #blog-title, this way you could click the logo to return to the homepage which is standard.
    4. There are tons of “!important” declarations, generally if you have to use these, you are doing something wrong, since CSS cascades, it is only OK to use them once in a great while, for example combating a plugins CSS would be a good example.
    5. Also the CSS “float: center” isn’t a valid property.

    The problem I am having is there is so much code that isn’t correct, that it makes it really hard to narrow down what is causing issues. The site like you have it now is actually really simple to do and Thematic by default doesn’t have any of these problems. Honestly I would just start over by wiping your CSS (obviously save it), but start with a clean slate using the full width template instead of trying to modify the default one. Also putting the header-aside inside the branding will totally help with positioning of the 2 right images in the header.

Viewing 15 posts - 1 through 15 (of 16 total)

The topic ‘Dimension main’ is closed to new replies.