Forum Replies Created
-
AuthorPosts
-
May 26, 2018 at 2:55 pm in reply to: How to do visual adjustments on Front Page 4 module and widgets in Atmospher Pro #220250DougParticipant
Thanks, Brad.
I tried adding that code and adjusting the width amounts, but am not seeing any change in results.
I’ve added it to the Appearance > Customize > Additional CSS window, and also to style-front.css doc.
One thing I’ve noticed that’s odd is, when I shrink the browser size down significantly, the thumbnails popup to a large size. A size very close to what I’m trying to get.
I’m curious if that behavior sounds odd to you, and if you could clarify where I need to put the code you posted.
Here are 2 screengrabs, if helpful.
Thanks
DougMay 22, 2018 at 7:49 pm in reply to: How to do visual adjustments on Front Page 4 module and widgets in Atmospher Pro #220172DougParticipantThanks. That link was very helpful.
I’ve located the element I’m wanting to change. I want to increase the dimensions of the image class img.entry-image.attachment-page so that it displays a larger thumbnail image.
Example of how the images display in the desktop browser window. Featured Productions font-page-4 section of http://www.arrovox.com
(If I shrink the browser window, the images jump to a much larger. I was looking for window dimension settings, but didn't see that in the HTML or CSS windows.)I thought I would see an area named img.entry-image.attachment-page in the CSS window, and could then change it's parameters to test my results. However, I’m not seeing anything with that title.
Can you tell me if img.entry-image.attachment-page is the right element, and if so, where to modify it so it increases the display dimensions of the thumbnail for the page’s featured image?
Thanks
May 15, 2018 at 10:13 am in reply to: Help generating custom CSS to change Portfolio Pro thumbnail image columns #219917DougParticipantThat worked great, Brad. Thanks!
May 11, 2018 at 11:43 am in reply to: How to increase image files of Portfolio Pro items on the portfolio page #219784DougParticipantThank you.
I've installed the code on functions.php:
//* Add Image Sizes
add_image_size( 'front-page-featured', 640, 640, TRUE );
add_image_size( 'portfolio', 600, 400, TRUE );And have installed the Regenerate Thumbnails plugin, and run it for all thumbnails, via Tools.
I've done a hard refresh on my page, and the thumbnail images are still the old size, which can be seen at this page:
http://arrovox.com/portfolio-type/productions/Any suggestions?
Thanks
DougMay 10, 2018 at 11:37 pm in reply to: How to increase image files of Portfolio Pro items on the portfolio page #219751DougParticipantCorrect page URL
http://arrovox.com/portfolio-type/productions/March 15, 2018 at 12:17 pm in reply to: Image isn't displaying in HTML Widget on right sidebar #217945DougParticipantThx so much. That was a big help.
January 25, 2018 at 11:04 am in reply to: How to increase size of header area and header image in Genesis Sample? #215729DougParticipantThanks, Victor. That's a simple to follow article.
I made the changes per the article, from a previous width/height of 600x160 to 1200x450 in functions.php. And also changed the min header height to 450p in style.css.
However, I'm still having two problems.
1. The header image is heavily pixelated, despite being 2704 ?— 1083
2. On mobile, the header locks at the larger height, and I'd like it to scale for smaller browsers.Here's the site page
http://www.homieandlexy.comCan you tell if there's anything I'm missing?
Thank you
dougJanuary 16, 2018 at 4:28 pm in reply to: Increase the height of header area for Genesis Sample theme #215461DougParticipantThanks, Victor. That worked great for increasing the image size.
I’m still having 2 issues, though.1.
On mobile the header vertical space is very high
Is this due to the 450p height I just created? Is there a way to have the header height scale according to browser window size. Ideally it would scale height and width -- the way the image does -- as the browser window expands or contracts. Something that would work for both desktop and mobile?2.
Image is pixelating
I’m not sure why, as the image size is 2704 ?— 1083, which is considerably larger than the header space.Here’s the page link for reference.
http://homieandlexy.com/Thank you,
dougDougParticipantThanks, Victor. Very helpful response and article.
The article speaks of the importance of designing for Mobile First, which I definitely would like to do, especially as this seems in line with Google's philosophy.
I found the following on line 96 of my home page:
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}My understanding from the article is that because the code refers to "max-width" and not "min-width", that my Atmosphere Pro theme is not a Mobile First theme.
At this point, I'm wondering what my options are to have a Mobile First design. I'm guessing it's not an easy conversion for an existing Genesis child theme?
If I want to fix just this one front page section (front-page-2), would that mean inserting a mobile version of the <div id="front-page-2" class="front-page-2"> code right after the current @media media query on line 96?
thanks
June 15, 2017 at 9:30 am in reply to: Increasing the text drop shadow for the home page widget 1 #207795DougParticipantFollow up: I didn't realize my code changes were impacting headers throughout the site, so removed all the above code edits.
June 14, 2017 at 6:30 pm in reply to: Increasing the text drop shadow for the home page widget 1 #207757DougParticipantAlso, I noticed the above CSS hasn't affected the mobile version of the site. This has happened before on text changes, so if anyone can clarify how to make those changes also cover the mobile site, that would be great.
DougParticipantI see what you're referencing. Thanks, Victor!
DougParticipantVictor
Per my screen grab, the CSS side is the right-most box with the Styles menu highlighted at top, correct?
If so, can you elaborate on where you're seeing the line numbers? You're seeing them on my screen grab?
thanks
dougDougParticipantThanks, Victor.
The W3 schools are great, so appreciate you commenting on that.
Regarding the line numbers, I'm not seeing them in Inspector in either the HTML or CSS windows. Here's a screen grab.
https://drive.google.com/file/d/0B4FBN-hZ6_4ud0hpLWtIRUZOcDA/view?usp=sharingIs there a place I need to make those visible in the Inspector?
doug
DougParticipantThanks, Victor (sorry for the delay. got hit with the flu.)
That was very helpful and I fixed it. I was going to the code section
.genesis-nav-menu,
.site-description,
.site-header .title-area,
.site-header .widget-area,
.site-title {
text-align: center;... instead of ...
.site-description {
So got that figured out.
Two questions.
1. I've been through the Genesis manual, but haven't seen any references to what CSS points to what section of the page. Do you know a good reference for that? The W3 schools on CSS? In the above example, I didn't understand the difference between ".site-description {" and ".genesis-nav-menu,.site-description,".2. When you reference the code lines, where can I see that? I'm looking in the wordpress editor and in Inspector, but not seeing them either place. I've been looking for an option to turn on, or a box to check to display the code lines, but haven't found anything.
Thank you for your help
dougDougParticipantVictor
Thank you. This is very helpful. I was able to go onto my site and change the header title text color from black to white due to this.
I tried changing the Description text under it, and didn't get the same successful results, though, and I'm confused as to what I'm doing differently.
I'm using Chrome
Similar to changing the title text, I right-clicked on the descriptive text (What Genesis refers to as the Tagline), and unlike with the title text, I didn't see any reference to the color.
As I was mousing around in the Inspector, I found a reference to the .site-description in the styles section. It only had a "text-align: center;" reference though. To the right of that, I found a three dot menu with an "Add color" option. So I clicked that and added "color: #ffffff;" which successfully changed the font color to white on my screen.
I then went into style.css and, like I did with the title, I added the "color: #ffff;" just below the "text-align: center;" code. However, in this case, on the actual site it didn't change the color to white, and removed the center alignment.
Any ideas what I'm doing wrong? I think the problem is that I don't see any clear reference to the descriptive text color anywhere.
thanks
dougMay 11, 2017 at 11:54 am in reply to: Trying to fix line breaks on mobile version of Atmosphere Front Page 2 widget #206292DougParticipantVictor,
Thanks for the note.
I tried changing that code to your suggestion, but it's still breaking the words.
https://goo.gl/photos/mim9sVhL8e4rTVdP9
I'm hoping to get the photo to scale to full width, and the headline align left below it. Like this, only if the headline and image positions are switched, that's fine.
https://goo.gl/photos/mim9sVhL8e4rTVdP9The new code I have in there is:
.widget {
word-wrap: normal;
}But it didn't seem to change how it was presented.
For reference, here's the page in question -- it's the mobile browser view I'm trying to correct.
Thanks for any additional input.
-
AuthorPosts