[Resolved] Full Width Container on Mobile Devices is not working

[Carlos]

Hello there,

I want to use the full width container on mobile devices, but it is not working. I follow this procedure: https://generatepress.com/forums/topic/full-width-container-on-mobile-devices/

I add in the CSS option:

@media only screen and (max-width:800px) {
.container {
min-width:100% !important;
}
}

My padding is 320 and I wish to change the value to: 370 with margin: 30

Any idea please?

[Leo]

Hi there,

So you are trying to remove the padding here?
https://www.screencast.com/t/sFsZQTwZ

Looks like you have the same issue here as well:
https://generatepress.com/forums/topic/full-width-container-on-mobile-devices/#post-1366234

[Carlos]

Leo,

my child theme style file:

/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/*#bbuscar_cap{
    color:red;background: red;
}*/
.content {
    margin: 0 auto !important;
}
.menu.simple li{
    margin-left: 0
 }
 body .share-box{
     margin-top: -8px;
 }
@media (min-width: 336px) and (max-width:767px) {
    .content {
        width: auto !important;
    }
    .crunchify-link{
        font-size: 11px !important;
    }
       
}

@media screen and (max-width:400px) {
    body #main-content {
        width: auto!important;
    }
    
}

@media screen and (max-width:500px) {
    .fb_iframe_widget_fluid_desktop iframe{
        width: 100% !important;
    }
    
.entry-meta.comment-metadata {
    display: none;
}

My Functions file theme child:

<?php
/**
 * GeneratePress child theme functions and definitions.
 *
 * Add your custom PHP in this file. 
 * Only edit this file if you have direct access to it on your server (to fix errors if they happen).
 */

add_action( 'wp_head', 'child_theme_head_script'); 
function wpse62415_filter_wp_title( $title ) {
    $url = parse_url("https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]");
               
        foreach ($url as $key => $value) {
            if(preg_match("/^\/biblia/", $value)) {
                $after 		= ' - Biblia DC Online';
                $result 	= [];
                $result2 	= [];
                $result3 	= [];

                $filepath = $_SERVER['DOCUMENT_ROOT'].$url['path'];
                
                        if (file_exists($filepath)) {
                          $file = file_get_contents($filepath);
                          preg_match("/<h2[^>]+>(.+?)<\/h2>/", $file, $result);
                          
                          if(isset($result[1])) {
                             $title = $result[1].$after;
                          } else {
                                $file = file_get_contents($filepath);
                                preg_match("/<h2>(.+?)<\/h2>/", $file, $result2);
                                if(isset($result2[1])) {
                                    $title = $result2[1].$after;
                            } else {
                                $file = htmlspecialchars(file_get_contents($filepath));
                                        preg_match("/<h2>(.+?)<\/h2>/", $file, $result3);
                                        if(isset($result3[1])){
                                            $title = $result3[1].$after;}
                                    else{
                                        $title = 'Biblia DC Online - Devocionales ✝ Cristianos';}
                            }
                          }
                        }
            }
        }
    return $title;
}
add_filter( 'wp_title', 'wpse62415_filter_wp_title',100 );

/*  ----------------------------------------------------------------------------
    add the parent style + style.css from this folder
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
    wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
    wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );

}

//add_action( 'wp_head', 'child_theme_head_script'); 

	add_filter('pre_get_document_title', 'change_the_title');
	function change_the_title($title) {
		$url = parse_url("https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]");
                
		foreach ($url as $key => $value) {
		    if(preg_match("/^\/biblia/", $value)) {
		     	$after 		= ' - Biblia DC Online';
		     	$result 	= [];
		     	$result2 	= [];
		     	$result3 	= [];

		     	$filepath = $_SERVER['DOCUMENT_ROOT'].$url['path'];
				if (file_exists($filepath)) {
				  $file = file_get_contents($filepath);
				  preg_match("/<h2[^>]+>(.+?)<\/h2>/", $file, $result);
				  if(isset($result[1])) {
				    return $result[1].$after;
				  } else {
				  	$file = file_get_contents($filepath);
				  	preg_match("/<h2>(.+?)<\/h2>/", $file, $result2);
				  	if(isset($result2[1])) {
			    		return $result2[1].$after;
				    } else {
				    	$file = htmlspecialchars(file_get_contents($filepath));
					  	preg_match("/<h2>(.+?)<\/h2>/", $file, $result3);
					  	if(isset($result3[1]))
					    	return $result3[1].$after;
					    else
					    	return 'Biblia DC Online';
				    }
				  }
				}
		    }
		}
	    return $title;
	}

function theme_slug_logo_url() {
    return 'https://www.devocionalescristianos.org';
}

add_filter( 'login_headerurl', 'theme_slug_logo_url' );

function theme_slug_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(https://www.devocionalescristianos.org/wp-content/uploads/2019/01/Logo_DC_ultimo_2019-2.png);
            height:75px;
            width:320px;
            background-repeat: no-repeat;
            padding-bottom: 20px;
            background-size: 320px;
        }
    </style>
<?php }

add_filter( 'generate_post_date_output', function() {
    $time_string = '<time class="entry-date published">%2$s</time>';

    if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
        $time_string = '<time class="updated" datetime="%3$s" itemprop="dateModified">%4$s</time>';
    }

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

    return sprintf( '<a href="%1$s" title="%2$s" rel="bookmark">%3$s</a>',
        esc_url( get_permalink() ),
        esc_attr( get_the_time() ),
        $time_string
    );
} );

if ( ! function_exists( 'generate_comment' ) ) {
	/**
	 * Template for comments and pingbacks.
	 *
	 * Used as a callback by wp_list_comments() for displaying the comments.
	 */
	function generate_comment( $comment, $args, $depth ) {
		$args['avatar_size'] = apply_filters( 'generate_comment_avatar_size', 50 );

		if ( 'pingback' == $comment->comment_type || 'trackback' == $comment->comment_type ) : ?>

		<li id="comment-<?php comment_ID(); ?>" <?php comment_class(); ?>>
			<div class="comment-body">
				<?php _e( 'Pingback:', 'generatepress' ); // WPCS: XSS OK. ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( 'Edit', 'generatepress' ), '<span class="edit-link">', '</span>' ); ?>
			</div>

		<?php else : ?>

		<li id="comment-<?php comment_ID(); ?>" <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ); ?>>
			<article id="div-comment-<?php comment_ID(); ?>" class="comment-body" <?php generate_do_microdata( 'comment-body' ); ?>>
				<footer class="comment-meta">
					<?php
					if ( 0 != $args['avatar_size'] ) {
						echo get_avatar( $comment, $args['avatar_size'] );
					}
					?>
					<div class="comment-author-info">
						<div class="comment-author vcard" <?php generate_do_microdata( 'comment-author' ); ?>>
							<?php printf( '<cite itemprop="name" class="fn">%s</cite>', get_comment_author_link() ); ?>
						</div><!-- .comment-author -->

						<div class="entry-meta comment-metadata">
							<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>">
							</a>
							<?php edit_comment_link( __( 'Edit', 'generatepress' ), '<span class="edit-link">| ', '</span>' ); ?>
						</div><!-- .comment-metadata -->
					</div><!-- .comment-author-info -->

					<?php if ( '0' == $comment->comment_approved ) : ?>
						<p class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'generatepress' ); // WPCS: XSS OK. ?></p>
					<?php endif; ?>
				</footer><!-- .comment-meta -->

				<div class="comment-content" itemprop="text">
					<?php
					/**
					 * generate_before_comment_content hook.
					 *
					 * @since 2.4
					 *
					 */
					do_action( 'generate_before_comment_text', $comment, $args, $depth );

					comment_text();

					/**
					 * generate_after_comment_content hook.
					 *
					 * @since 2.4
					 *
					 */
					do_action( 'generate_after_comment_text', $comment, $args, $depth );
					?>
				</div><!-- .comment-content -->
			</article><!-- .comment-body -->
		<?php
		endif;
	}
}

Any idea please?

Thnak you very much

[Leo]

Try removing this:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
    wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.css', '', TD_THEME_VERSION, 'all' );
    wp_enqueue_style('td-theme-child', get_stylesheet_directory_uri() . '/style.css', array('td-theme'), TD_THEME_VERSION . 'c', 'all' );

}

[Carlos]

Hello Leo,

delete this code work! But the padding left and right is set up in automatic to 30px, I need to change it value to 20px.

How I can do it?

Thank you very much!

[Leo]

Have you tried changing the content padding option?

[Carlos]

Leo,

I don’t have the option. Where is the option? I believe that my menu configuration does not allow me to enable that option.

Any idea?

Thank you very much!

[Leo]

Should be this one here:
https://docs.generatepress.com/article/content-padding/

[Carlos]

Leo,

I don’t have it option.

You can se my container here: Image

Any idea?

Thank you very much

[Carlos]

Leo,

I’d installed the element: Spacing.

All is ok now!

Thank you very much!

[Leo]

No problem 🙂

[Author]

Posts