Community Forums › Forums › Archived Forums › Design Tips and Tricks › Viewport Media Querries Don't Work on Front-Page.php
Tagged: media querries, viewport
- This topic has 4 replies, 2 voices, and was last updated 7 years, 9 months ago by vmouravi.
-
AuthorPosts
-
June 22, 2016 at 9:18 am #188025vmouraviMember
Hello Everyone!
I have created the front-page.php for my website redinvasion.com. I'm using a separate stylesheet for that page. The page consists of widgets that display different sections.
The problem is that the media quierries that I create in the dedicated stylesheet don't work!
Here is an example of what I have added to that stylesheet:
@media screen and (max-width:1024px) {
.home-welcome{
width:100%;
}.why-wp{
width:100%;
}.sp-service{
width:100%;
}.wp-process{
width:100%;
}.seo-keywords{
width:100%;
}.seo-keywords-ltk{
width:100%;
}.seo-keywords-service{
width:100%;
}.about-me{
width:100%;
}.work-examples{
width:100%;
}.call-to-action{
width:100%;
}
}Please advise me on how to get these media querries to work on front-page.php. (They worked on my regular blog).
Best Regards,
http://redinvasion.com
VasilyJune 22, 2016 at 6:20 pm #188067Victor FontModeratorI just looked at the front-page.css that you're loading and it does not have the media query code in it. This is all your file has:
/* Front Page Media Querry */ @media screen and (max-width:1024px) { .site-inner .full .home-welcome{ width:100%; } }
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?June 23, 2016 at 2:58 am #188104vmouraviMemberHello Victor!
Thanks a lot for looking into this.I have just tried using the code structure you proposed - but id desn't work.
At the same time my media querries querries continue to work for the non-front-page.php part of my website. (you can see that they continue to work for the header of my website.)....
So, none of the elements on my front-page.php react to the media quierries I define for them in the new front-page.css stylesheet!!! (even when I specify ".site-inner .full").
I'm really lost right now.*******************************************My front-page.css doesn't use ".site-inner .full" before any of the elements. Here is hwo it looks:**************************************
/*
Front Page Stylesheet
*//* Expand The Width */
.site-container {
max-width: 1480px;
}.site-header {
background-color: #000;
}/* Hide Logo and Hide Nav Menu */
.header-left {
display: none;
}.widget_nav_menu {
display: none;
}.header-widget-area {
margin: 0;
}.site-header .wrap {
padding: 5px;
}/* Home Welcome Widget Area
========================================================================*/.home-welcome {
margin: 0 auto;
height: 845px;
width: 100%;
background: url(images/ussr1600x850.jpg) no-repeat;
background-size: cover;
color: #fff;
text-align: center;
padding: 30px 100px 0;
}*********************************************Here is my front-page.php strucutre (maybe it has some mistakes):********************************************
<?php
/**
* EA Genesis Child.
*
* @package EAGenesisChild
* @since 1.0.0
* @copyright Copyright (c) 2014, Contributors to EA Genesis Child project
* @license GPL-2.0+
*/// Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array( 'header', 'footer-widgets', 'footer' ) );/**
* Add the attributes from 'entry', since this replaces the main entry
*
* @author Bill Erickson
* @link http://www.billerickson.net/full-width-landing-pages-in-genesis/
*
* @param array $attributes Existing attributes.
* @return array Amended attributes.
*/
function be_site_inner_attr( $attributes ) {// Add a class of 'full' for styling this .site-inner differently
$attributes['class'] .= ' full';// Add the attributes from .entry, since this replaces the main entry
$attributes = wp_parse_args( $attributes, genesis_attributes_entry( array() ) );return $attributes;
}
add_filter( 'genesis_attr_site-inner', 'be_site_inner_attr' );// Add Home Welcome Widget Area
add_action( 'be_content_area', 'home_welcome_widget_area' );
function home_welcome_widget_area() {
if ( is_active_sidebar( 'home-welcome' ) ) {
genesis_widget_area( 'home-welcome', array(
'before' => '<div class="home-welcome widget-area">',
'after' => '</div>',
) );
}
}// Add Why WP Widget Area
add_action( 'be_content_area', 'why_wp_widget' );
function why_wp_widget() {
if ( is_active_sidebar( 'why-wp' ) ) {
genesis_widget_area( 'why-wp', array(
'before' => '<div class="why-wp widget-area">',
'after' => '</div>',
) );
}
}// WP Service Widget Area
add_action( 'be_content_area', 'wp_service_widget' );
function wp_service_widget() {
if ( is_active_sidebar( 'wp-service' ) ) {
genesis_widget_area( 'wp-service', array(
'before' => '<div class="wp-service widget-area">',
'after' => '</div>',
) );
}
}// WP Process Widget Area
add_action( 'be_content_area', 'wp_process_widget' );
function wp_process_widget() {
if ( is_active_sidebar( 'wp-process' ) ) {
genesis_widget_area( 'wp-process', array(
'before' => '<div class="wp-process widget-area">',
'after' => '</div>',
) );
}
}// SEO KEYWORDS Research Widget Area
add_action( 'be_content_area', 'seo_keywords_widget' );
function seo_keywords_widget() {
if ( is_active_sidebar( 'seo-keywords' ) ) {
genesis_widget_area( 'seo-keywords', array(
'before' => '<div class="seo-keywords widget-area">',
'after' => '</div>',
) );
}
}// SEO KEYWORDS Long Tail Widget Area
add_action( 'be_content_area', 'seo_keywords_ltk_widget' );
function seo_keywords_ltk_widget() {
if ( is_active_sidebar( 'seo-keywords-ltk' ) ) {
genesis_widget_area( 'seo-keywords-ltk', array(
'before' => '<div class="seo-keywords-ltk widget-area">',
'after' => '</div>',
) );
}
}// SEO KEYWORDS Service Widget Area
add_action( 'be_content_area', 'seo_keywords_service_widget' );
function seo_keywords_service_widget() {
if ( is_active_sidebar( 'seo-keywords-service' ) ) {
genesis_widget_area( 'seo-keywords-service', array(
'before' => '<div class="seo-keywords-service widget-area">',
'after' => '</div>',
) );
}
}// About Me Widget Area
add_action( 'be_content_area', 'about_me_widget' );
function about_me_widget() {
if ( is_active_sidebar( 'about-me' ) ) {
genesis_widget_area( 'about-me', array(
'before' => '<div class="about-me widget-area">',
'after' => '</div>',
) );
}
}// Work Examples Widget Area
add_action( 'be_content_area', 'work_examples_widget' );
function work_examples_widget() {
if ( is_active_sidebar( 'work-examples' ) ) {
genesis_widget_area( 'work-examples', array(
'before' => '<div class="work-examples widget-area">',
'after' => '</div>',
) );
}
}// Add Call to Action Widget Area
add_action( 'be_content_area', 'call_to_action_widget' );
function call_to_action_widget() {
if ( is_active_sidebar( 'call-to-action' ) ) {
genesis_widget_area( 'call-to-action', array(
'before' => '<div class="call-to-action widget-area">',
'after' => '</div>',
) );
}
}// Build the page
get_header();
do_action( 'be_content_area' );
get_footer();June 23, 2016 at 1:43 pm #188175vmouraviMemberVictor,
I understand that this code is not enough......:
/* Front Page Media Querry */
@media screen and (max-width:1024px) {.site-inner .full .home-welcome{
width:100%;
}}
but this small peace of code doesn't work. I mean .home-welcome should react to the above querry. Right?June 23, 2016 at 2:09 pm #188185vmouraviMemberHello Victor! Sorry, I just got lost in all the new stuff here. It's working, I'm wrong
-
AuthorPosts
- The topic ‘Viewport Media Querries Don't Work on Front-Page.php’ is closed to new replies.