Support » Fixing WordPress » Coding from scratch isscue

  • jamesacp

    (@jamesacp)


    Hello,

    I am building a clients website and he wants hyperlinks in a column and rows format. I am attempting to code using html as I am not skilled enough in CSS and the plugins I have found are not useful. Whilst adding the hyperlinks the columns will jump around after publishing. If I don’t hyperlink the text and just add text it publishes the way its supposed to. It seems to be a problem only when attempting to add the hyperlinks. If anyone can help that would be great

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Hi there,

    Are you able to share an example of the markup? How are you creating that?

    Thread Starter jamesacp

    (@jamesacp)

    Hello,

    Thank you for your speedy response. Below is the code.

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style>
    * {
    box-sizing: border-box;
    }
    
    /* Create four equal columns that floats next to each other */
    .column {
    float: left;
    width: 25%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
    }
    
    /* Clear floats after the columns */
    .row:after {
    content: “”;
    display: table;
    clear: both;
    }
    </style>
    </head>
    <body>
    
    <div class=”row”>
    <div class=”column” style=”background-color:#ffff;”
    • ELECTRICAL
    • PLUMBING
    • POWER WASHING
    • CONCRETE
    • DRYWALL
    • STUCCO
    • PAINT
    • FRAMING
    • GARAGE STORAGE UNITES
    (ASSEMBLY / BUILDING)
    • ROUGH & FINISH CARPENTRY
    *VALUE ENGIREERING
    *CONSTRUCTION PROJECTS & CONSULTATION
    *ELDERY AND HANDY-CAPABLE RAILS & EQUIPMENT
    (INSTALLATION & ASSEMBLY)
    </div>
    
    <div class=”column” style=”background-color:#ffff;”>
    • WINDOW SCREENS
    • DOORS & WINDOWS
    • FIREPLACES
    • CABINETS
    • TRASH REMOVAL & YARD CLEAN-UP
    • DECKS
    • FENCES
    • COMMERCIAL & RESIDENTIAL
    • (HOURLY & MONTHLY MAINTENANCE
    • SERVICE CONTRACTS AVAILABLE)
    • CONSTRUCTION & PROJECT CONSULTATION<
    
    </div>
    <div class=”column” style=”background-color:#ffff;”>]
    • DEMOLTION & TRASH HALLING
    • HONEY DO LISTS
    • MAINTENANCE (HOURLY / MONTHY)
    • AIR B&B MAINTENANCE & UPGRADES
    (MONTHLY CONTRACTS AVAILABLE)
    • REAL ESTATE AND RENTAL MAINTENANCE
    (MONTHLY CONTRACTS AVAILABLE)
    KITCHENS
    BATHROOMS
    MINOR ROOF REPAIRS
    </div>
    
    </div>
    </div>
    
    </body>
    </html>
    
    • This reply was modified 4 months ago by Jose Castaneda. Reason: code formatting
    Ramona

    (@nextend_ramona)

    I’d rather suggest avoiding the float and using grid:
    https://www.w3schools.com/css/css_grid.asp
    https://css-tricks.com/snippets/css/complete-guide-grid/

    This way you can make the columns and even make them responsive with just a couple of lines of CSS:

    .row{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
        grid-gap: 10px;
        width: 100%; /* you might not need this, but I did in my WP test */
    }

    And you could use flexbox:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    https://www.w3schools.com/css/css3_flexbox.asp
    for the inner elements to make the links display below another:

    .column{
        display: flex;
        flex-direction: column;
    }

    Here’s a codepen example:
    https://codepen.io/nextend_ramona/pen/wvPQMPb

    Also, a > is missing from the first column’s markup. It looks like this now:
    <div class="column" style="background-color:#ffff;"
    but it needs to be like this:
    <div class="column" style="background-color:#ffff;">

    Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    Ah. Okay so you’re coding a template (I’m guessing).

    My initial thought was you were using a plugin or page builder and it was acting oddly.

    Yeah, I would suggest using grid as well like noted above instead of the float.

    Thread Starter jamesacp

    (@jamesacp)

    Thank you both for your speedy reply, and help. I have one last question as CSS is foreign to me where html was my area of study in college. If I want to chose a different theme it changes the layout of the grid instead of the rows being horizontal it changes the rows to vertical. Is there a css coding fix for this?

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.