5568 sujets

Sémantique web et HTML

Bonjour à tous, je ne sais pas si je suis au bon endroit mais je poste quand même. Qui ne tente rien n'a rien Smiley smile .

Je vous expose mon problème :

Je crée actuellement un site sous Wordpress avec le thème BLDR Pro : https://modernthemes.net/wordpress-themes/bldr-pro/

J'essaie désespérément d'aligner ces 4 blocs en leur donnant chacun un taille en pourcentage : 25% donc.

upload/62434-Capturedae.png

Voici le code du widget et la portion de code CSS où la classe figure normalement :

(J'ai essayé de modifier la classe col-1-3 en col-1-4 mais rien n'y fait)
En touchant au code HTML et non au CSS, serait-il possible d'arriver à mes fins ?

Merci beaucoup !

<?php
/**
Template Name: Page - Services
 *
 * @package BLDR
 */

get_header(); ?>

<section id="services-entry-content">
    <div class="grid grid-pad">
        <div class="col-1-1">
            <div id="primary" class="content-area">
                <main id="main" class="site-main" role="main">
        
                    <?php while ( have_posts() ) : the_post(); ?>
        
                        <?php get_template_part( 'content', 'page' ); ?>
        
                    <?php endwhile; // end of the loop. ?>
        
                </main><!-- #main -->
            </div><!-- #primary -->
        </div>
    </div>
    
    <div class="services">
    <div class="grid grid-pad">

		<?php query_posts( array ( 'post_type' => 'services', 'posts_per_page' => -1 ) );
			
					while ( have_posts() ) : the_post(); ?> 

			<div class="col-1-3">
            	<div class="single-service">
                	<i class="fa <?php echo types_render_field("icon", array("output"=>"raw")); ?> service-icon"></i>
                	<?php the_title( '<h3 class="service-title">', '</h3>' ); ?>
                    <?php the_content( '<p>', '</p>' ); ?>
                </div>
            </div>

		<?php endwhile; ?> 

	</div> 
    </div>
</section>
<?php get_footer(); ?>


/* Content Columns */

.col-1-1 {
	width: 100%;
}
.col-2-3, .col-8-12 {
	width: 66.66%;
}

.col-1-2, .col-6-12 {
	width: 50%;
}

.col-1-3, .col-4-12 {
	width: 33.33%;
}

.col-1-4, .col-3-12 {
	width: 25%;
}

.col-1-5 {
	width: 20%;
}

.col-1-6, .col-2-12 {
	width: 16.667%;
}

.col-1-7 {
	width: 14.28%;
}

.col-1-8 {
	width: 12.5%;
}

.col-1-9 {
	width: 11.1%;
}

.col-1-10 {
	width: 10%;
}

.col-1-11 {
	width: 9.09%;
}

.col-1-12 {
	width: 8.33%
}

Modifié par TOB (16 Jul 2016 - 00:13)