Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #14484

    Hi there,

    I had an issue earlier that I worked out by creating a specific div CSS for the four blocks of text on my homepage. I had four png buttons beneath those four blocks what would get misaligned in different browsers.

    The problem I’m having now is that when resizing the browser, because I defined the width of the div to be a specific width and height, the mobile and tablet version is keeping the dimensions.

    I’ve tried to add a class to the div and manipulate the @media command but have been unsuccessful at figuring it out after hours of struggling with it.

    Here is the code I created for the div:

    #welcome {

    width: 205px;

    height: 160px;

    padding-left: 0px;

    padding-right: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

    }

    The png buttons are just a regular div in the html but they are wrapped in them.

    Whenever I set the width of the #welcome div to 99% it works on one hand by adjusting the with correctly but then my buttons have a large amount of white-space in between the text and the button itself when the browser is resized.

    If I set the height to 99% for the #welcome div, it recreates my original problem. The buttons beneath the blocks of text become misaligned.

    And I’ve tried multiple ways to . . . I’ve tried a lot of stuff and am hoping that I can get some direction/help.

    http://www.underwearsociety.com

    Thank you guys.

    #83645

    Probably you won’t be able to solve this issue with a static width value. Instead try something line:

    #welcome {
    width: 25%;
    height: 160px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    }

    @media only screen and (max-width: 767px) {
    #welcome {
    width: 50%;
    }
    }

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Need Help Finding Right Code/CSS for Homepage Blocks on Mobile Devices’ is closed to new replies.