-
Search Results
-
Hi Guys - I'm using the Monochrome Pro theme and I want my site to display the full page when viewed on an iPad in portrait / vertical mode.
I believe the breakpoint is 782px with this code @media only screen and (max-width: 782px) in the style.css
What is the best way to change this so an iPad viewing at 768px can see the entire site in full width?
If I edit the style.css, won't this be changed with an update? If I add new css code into the additional css theme customization area, won't this just be in addition to the current media query because the query is different?
For example
The existing code it this:
@media only screen and (max-width: 782px)If I add
@media only screen and (max-width: 767px)to the CSS in theme customization, it won't override because it's just different.
Please help.
Hello,
I am using the Parallax Pro theme, but I'm looking for guidance in general using media queries with Genesis themes.
In the Parallax Pro theme you have break points defines as follows:
@media only screen and (max-width : 1180px) { }
@media only screen and (max-width : 1020px) { }
@media only screen and (max-width : 860px) { }
@media only screen and (max-width : 480px) { }This takes care of the theme's element layout as envisioned by the theme creator.
The question is, for my added content is it a good idea to restrict oneself to the break points as defined by the theme? Are there known issues with adding extra break points to
tweak font size or content placement etc. to give the webpage finer grained adjustments?Just looking for your experiences making the webpages responsive and what I should look out for.
I appreciate any sharing of your expertise.
thanks,
Rick Stewart
Warm regards,
Rick Stewart
web: https://windyhilldevelopers.com
email: [email protected]I've been working in Showcase Pro and everything has been straight forward, but I can't for the life of me figure out how to get a simple widget to be 100% in width. When I do a 3 column layout they always have padding on the sides:
I've tried setting the .wrap CSS class to padding: 0, but that only eliminates the right side padding. For some reason the "widget-area" DIV won't go 100% width.
This is the code I'm using to build the widget:
genesis_widget_area( 'studio-page-2', array( 'before' => '<div id="studio-page-2" class="studio-page-2 flexible-widget-area"><div class="wrap"><div class="widget-area">', 'after' => '</div></div></div>', ) ); And here are the CSS adjustments I'm using:
.curriculum-page-2 {
background: #fff;
border-top: 5px solid #fff;
border-bottom: 5px solid #fff;
}.curriculum-page-2 .wrap {
padding: 0;
/*margin: 0;*/
}.curriculum-page-2 .one-third {
padding: 3% 0 3% 0;
background: #D3D2D2;
border: 2px solid #fff;
/*margin: 0 auto 0 0;*/
}.curriculum-page-2 .widget:nth-of-type(1) {
text-align: center;
}Any help would be greatly appreciated. Thank you!
[Resolved]Topic: Questions About Media Queries
Friends:
I have a general question about media queries and then a question about a specific problem I'm encountering implementing media queries on a particular site.
A little background might be helpful. My HTML/CSS skills are self-taught, which means they oftentimes seem deficient. I tend to arrive at the final code I use through a trial-and-error process (I know it's not the best and that I should probably take a comprehensive course at some point, but with more than a full-time job and a family, it's sometimes hard to find the time). One of the areas where my knowledge is definitely insufficient is media queries. I'm just starting to use them, and I'm struggling a bit with the concepts.
With that as background, here's my general question: from what I've read, it seems to me that the best approach is not to target specific devices (which would be an endless process I think), but to instead keep adjusting the width of the viewport to find each breakpoint and then create specific media queries for each of the breakpoints I find. Am I on the right track?
Now, the more specific question. I'm working on this site. The stylesheet is here.
The process I have followed so far is this:
1. With a lot of help from Brad at WP Sites, I was able to implement Ambiance Pro so that it displays a single post on the home page.
2. I've adjusted the basic CSS so it displays how I want the home page post to appear when the viewport is wide (1519 pixels wide on at full width on the monitor I'm using).
3. I then wanted to implement media queries. As a start, I removed all of the media queries in the Ambiance Pro stylesheet and saved them.
4. I then started reducing the width of the viewport until the layout broke (I'm using this Chrome extension to adjust the browser width - not sure if that matters or not, but ....). The first breakpoint was at about 1198 pixels (I can't recall the exact width). I created a media query for a max-width of 1230 pixels and the 1198 pixel breakpoint was solved (I set the max-width at 1230 because I wanted to maintain a bit more whitespace in the left and right margins than if I had set the max-width at the actual breakpouint).
5. I then started reducing the width of the viewport further until the layout broke. The next breakpoint was at about 998 pixels (again, I can't recall the exact width). I created a media query for a max-width of 1024 pixels (again, wanting to maintain a bit more whitespace in the left and right margins)
6. So at this point, I have two media queries - one for a max-width of 1230 pixels and another for a max-width of 1024 pixels. But when I started reducing the width of the viewport further, I noticed that at a width of 1000 pixels, I had a problem. Although the layout of the home page had not broken itself, the browser had a horizontal scroll bar.
7. My first thought was that there must be an element in the stylesheet with a width greater than 1000 pixels, but I've checked every class and id on the page and can't seem to find anything that would be the source of the problem.
Any thoughts on how I should approach this? I'm at a loss as to what to do next to figure out the problem. Am I confused? In other words, I'm wondering now if the method I've described above is faulty in some way.
Thanks in advance for any help anyone can offer - it's much appreciated!
Frank
Topic: Wellness Woocommerce tweaks
Hi guys,
I am working on a site using the Wellness theme. In general it's a really nice, clean theme. However, I would like to adjust the Woocommerce pages to be similar to those used in Digital Pro. I find the Wellness shop a bit too cramped, whereas the Digital Pro one has a much nicer layout. The site is behind a maintenance page atm.
Before I start adjusting things and looking into CSS changes I thought I would ask to see if anyone has done a similar thing already? Essentially it means moving from a 880px inner container to using a full width template.
Happy to share my progress, but please do chip in if you've got any insights.
[Resolved]Topic: Aspire theme – Template not rendering CSS
Hi All,
Thanks for reading, hopefully you can help me out..
I created a template file by copying the front-page.php of Aspire theme. Then I created new widgets by duplicating the front page widgets and renaming them. I adjusted everything in the template php file, functions.php and in style.css.
I can use the template and add widgets to new pages but somehow it doesn't read the style.css in any way. It just doesn't apply to the template.
Have no clue what I'm missing here. Hope you can help me out.
Thanks in advance.
This is my template php file
<?php // Template Name: Home Template /** * This file adds the Home Page to the Aspire Theme. * * @author Appfinite * @package Aspire * @subpackage Customizations */ add_action( 'genesis_meta', 'aspire_front_page_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * */ function aspire_front_page_genesis_meta() { if ( is_active_sidebar( 'home-template-1' ) || is_active_sidebar( 'home-template-2' ) || is_active_sidebar( 'home-template-3' ) || is_active_sidebar( 'home-template-3-1' ) || is_active_sidebar( 'home-template-4' ) || is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) || is_active_sidebar( 'home-mid-wide' ) || is_active_sidebar( 'home-template-5' ) || is_active_sidebar( 'home-template-6' ) || is_active_sidebar( 'home-template-7' ) || is_active_sidebar( 'home-template-8' ) || is_active_sidebar( 'home-template-9' ) || is_active_sidebar( 'home-template-10' ) || is_active_sidebar( 'home-template-11' ) || is_active_sidebar( 'home-template-12' ) || is_active_sidebar( 'home-template-12-1' ) || is_active_sidebar( 'home-template-13' )) { //* Enqueue scripts add_action( 'wp_enqueue_scripts', 'aspire_enqueue_aspire_script' ); function aspire_enqueue_aspire_script() { wp_enqueue_script( 'aspire-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true ); wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true ); } //* Enqueue parallax script add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' ); function aspire_enqueue_parallax_script() { if ( ! wp_is_mobile() ) { wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' ); } } //* Add home-template body class add_filter( 'body_class', 'aspire_body_class' ); function aspire_body_class( $classes ) { $classes[] = 'home-template'; return $classes; } //* Remove breadcrumbs remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' ); //* Add homepage widgets add_action( 'genesis_after_header', 'aspire_front_page_widgets' ); add_action( 'genesis_after_header', 'aspire_front_page_widgets_mid' ); add_action( 'genesis_after_header', 'aspire_front_page_widgets_bottom' ); $journal = get_option( 'aspire_journal_setting', 'true' ); if ( $journal === 'true' ) { //* Add opening markup for blog section add_action( 'genesis_before_loop', 'aspire_front_page_blog_open' ); //* Add closing markup for blog section add_action( 'genesis_after_loop', 'aspire_front_page_blog_close' ); } else { //* Force full width content layout add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' ); //* Remove the default Genesis loop remove_action( 'genesis_loop', 'genesis_do_loop' ); //* Remove .site-inner add_filter( 'genesis_markup_site-inner', '__return_null' ); add_filter( 'genesis_markup_content-sidebar-wrap_output', '__return_false' ); add_filter( 'genesis_markup_content', '__return_null' ); remove_action( 'genesis_sidebar', 'genesis_do_sidebar' ); } //* Add featured-section body class if ( is_active_sidebar( 'home-template-1' ) ) { //* Add image-section-start body class add_filter( 'body_class', 'aspire_featured_body_class' ); function aspire_featured_body_class( $classes ) { $classes[] = 'featured-section'; return $classes; } } } } //* Add markup for front page widgets function aspire_front_page_widgets() { genesis_widget_area( 'home-template-1', array( 'before' => '<div id="home-template-1" class="home-template-1"><div class="fp1 image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-2', array( 'before' => '<div id="home-template-2" class="home-template-2"><div class="image-section"><div class="flexible-widgets widget-area"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-3', array( 'before' => '<div id="home-template-3" class="home-template-3"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-3-1', array( 'before' => '<div id="home-template-3-1" class="home-template-3-1"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-4', array( 'before' => '<div id="home-template-4" class="home-template-4"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); } //* Add markup for front page widgets function aspire_front_page_widgets_mid() { if ( is_active_sidebar( 'home-mid-left' ) || is_active_sidebar( 'home-mid-right' ) ) { echo '<div class="home-mid"><div class="wrap">'; genesis_widget_area( 'home-mid-left', array( 'before' => '<div id="home-mid-left" class="home-mid-left fadeup-effect"><div class="wrap">', 'after' => '</div></div>', ) ); genesis_widget_area( 'home-mid-right', array( 'before' => '<div id="home-mid-right" class="home-mid-right fadeup-effect"><div class="wrap">', 'after' => '</div></div>', ) ); echo '</div><!-- end .wrap --></div><!-- end .home-mid -->'; } genesis_widget_area( 'home-mid-wide', array( 'before' => '<div id="home-mid-wide" class="home-mid-wide"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); } //* Add markup for front page widgets function aspire_front_page_widgets_bottom() { genesis_widget_area( 'home-template-5', array( 'before' => '<div id="home-template-5" class="home-template-5"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-6', array( 'before' => '<div id="home-template-6" class="home-template-6"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-7', array( 'before' => '<div id="home-template-7" class="home-template-7"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-8', array( 'before' => '<div id="home-template-8" class="home-template-8"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-9', array( 'before' => '<div id="home-template-9" class="home-template-9"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-10', array( 'before' => '<div id="home-template-10" class="home-template-10"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-11', array( 'before' => '<div id="home-template-11" class="home-template-11"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-12', array( 'before' => '<div id="home-template-12" class="home-template-12"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-12-1', array( 'before' => '<div id="home-template-12-1" class="home-template-12-1"><div class="image-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); genesis_widget_area( 'home-template-13', array( 'before' => '<div id="home-template-13" class="home-template-13"><div class="solid-section"><div class="flexible-widgets widget-area fadeup-effect"><div class="wrap">', 'after' => '</div></div></div></div>', ) ); } //* Add opening markup for blog section function aspire_front_page_blog_open() { $journal_text = get_option( 'aspire_journal_text', __( 'Latest From the Blog', 'aspire' ) ); if ( 'posts' == get_option( 'show_on_front' ) ) { echo '<div id="journal" class="widget-area"><div class="wrap">'; if ( ! empty( $journal_text ) ) { echo '<h2 class="widgettitle widget-title journal-title">' . $journal_text . '</h2><hr>'; } } } //* Add closing markup for blog section function aspire_front_page_blog_close() { if ( 'posts' == get_option( 'show_on_front' ) ) { echo '</div></div>'; } } genesis();
I've inserted an image into a Page and want it to be the full width of the content. However, it's showing up considerably less, even though it's much larger in size (2500 px). Are there adjustments I should make in css, and if so where? I'm using a child theme of Workstation Pro.
I'm inserting an image into a Page and want it to be the full width of the content. It's coming in considerably less, even though the image is more than large enough (2500 px). Where in the css can I adjust this? I'm using a child theme of Workstation Pro.
Topic: Aspire Image on front page
Hi!
Using the Aspire theme, I have changed the background image on the front page 1 section.On most monitor widths the image is fine and stretches full width. However, if I adjust the browser to a specific shorter width the image fails to stretch to 100% width.
One thing is that it is very difficult to get images the exact same size as stated, ie 1600 x 1050 pixels, without pre cropping, which I do not wish to do. So, as my image is 1600 x 900 I wonder if that could be my problem, although I can't see why it should be.
Does anybody know how I can fix this so it always stretches to 100% width?
PS, please ignore the quality of the photo, it is just for testing purposes and is low quality!!!
Welcome!
These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.