Archived topic
Full Width Container on Mobile Devices is not working
10 replies · Started by Carlos on July 17, 2020
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?
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
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
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' );
}
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!
Have you tried changing the content padding option?
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!
Should be this one here:
https://docs.generatepress.com/article/content-padding/
Leo,
I'd installed the element: Spacing.
All is ok now!
Thank you very much!
No problem :)