Align boxes

  • Hello, I am using this code to make three boxes that I put below an image so that visitors to the name click on a page.

    The problem I have is that from the mobile are not aligned and I would like to know if there is any way that, when entering from a mobile appear one on top of another or adapt to the dimensions.

    I used a “div Img class” to do that with the images but with the boxes I can not find how to do it.

    The code I use for the boxes is:

    <div style="width: 100%; margin: 0 auto;">
<div style="background-color: #575756; height: 50px; color: white; padding: 10px; width: 190px; margin: 0 10px 0 39px; float: left;">
<p style="text-align: center;">NOMBRE</p>
</div>
<div style="background-color: #575756; height: 50px; color: white; padding: 10px; width: 185px; margin: 0 50px 0px; float: left;">
<p style="text-align: center;">NOMBRE</p>
</div>
<div style="background-color: #575756; height: 50px; color: white; padding: 10px; width: 182px; margin: 0 0 0 8px; float: left;">
<p style="text-align: center;">NOMBRE</p>
</div>
</div>
    • This topic was modified 6 years, 10 months ago by Jan Dembowski.
    • This topic was modified 6 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress
Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Please provide a link to a page on your site where we can see this. Thanks.

    Thread Starter dfart

    (@dfart)

    @sterndata I′m sorry, the website is not published.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try emulating the relevant Webpage through a sandbox tool like CSSDesk.com:

    1. View your webpage;
    2. Right click on the page somewhere and press “View source
    3. A new window will appear with all the code of your page. Copy all of that code
    4. Go to CSSDesk.com and paste it into the “HTML” section
    5. Press the “Share” button in CSSDesk
    6. A new URL will appear to the left of the “Share” button, copy that URL and paste it here in this thread

    We can then hopefully see your webpage without it going live.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    It’s really hard to deal with CSS issues without a site to inspect and test on.

    Thread Starter dfart

    (@dfart)

    @anevins The link is: https://www.cssdesk.com/6ewvq

    @sterndata I know it’s hard to give me a solution without being able to see the page. But to see if I find how to do it, but, an alternative is that you peguéis the code that I have spent on a page of your WrodPress and modify the size of the browser to make it look like a mobile. I know it’s a mess to help me. I leave in link above how I have the squares.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Align boxes’ is closed to new replies.