Forum Replies Created
-
AuthorPosts
-
March 20, 2014 at 11:29 pm in reply to: My nav bar sub-items are way off when on mobile device #95922MarcyParticipantMarch 20, 2014 at 7:05 pm in reply to: My nav bar sub-items are way off when on mobile device #95901MarcyParticipant
Well, I don't see the icon still, so look for this section:
#responsive-menu-icon:before { color: #FFFFFF; content: ""; font: 24px/1 'dashicons'; margin: 0 auto; }
and change
color: #ffffff;"
to
color: #565657;
Marcy | Amethyst Website Design | Twitter
March 20, 2014 at 7:03 pm in reply to: My nav bar sub-items are way off when on mobile device #95900MarcyParticipantYes, it was the color of the icon. And it's a dashicon, not the HTML character, as in the earlier version that Harley was using.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantMarcyParticipantYou need to add some extra @media sections at the bottom of style.css to reduce the height of the header. I don't know the height you need, so you will have to look at your site for different screen sizes yourself to see what height you need.
For instance
@media only screen and (max-width: 480px) {
.header-image .site-title a {
min-height: 100px;
}
}
@media only screen and (max-width: 320px) {
.header-image .site-title a {
min-height: 75px;
}
}
Marcy | Amethyst Website Design | Twitter
MarcyParticipantAgain I can't really help without a link to your site. There are no links to your images, so I'm guessing again.
You need to add a contain or cover properties to your image size to see which you like best, but since your image is so large, I'm not sure how that's really going to work for you. It may be best to actually size the image yourself for different screen sizes and add that to you @media query sections.
To add cover or contain properties, you have to write the entire background image CSS on separate line to do it, so you would now have:
.header-image .site-header .wrap {
background-image: url(images/logo.png);
background-repeat: no-repeat;
background-position: center top;
background-size: contain; /* or you can try background-size: cover; instead */
padding: 0;
}
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIt would be a bit easier to help, if you provided a link to your site. But here goes...
Find this selector in your style.css:
.site-header .wrap {
padding: 40px 0;
padding: 4rem 0;
}
and add max-width: 100%; to it, so it looks like:.site-header .wrap { padding: 40px 0; padding: 4rem 0; max-width: 100%; }
And then you may want to change this section (change left to center) so that it centers the header:
.header-image .site-header .wrap { background: url(images/logo.png) no-repeat center; padding: 0; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantYou're welcome, Greg. I'm glad it worked out!
Regards, Marcy
Marcy | Amethyst Website Design | Twitter
MarcyParticipantOK, you're right about the background color on .home-section-1 covering the entire area.
This will do it though:
.home-section-1 .wrap { background-color: #fff; }
That will be easier than trying to make the actual widget heights the same.
If you want the white background behind .home-section-2 to be the same width, and not full width too, you would use. You can add as many sections as you need..home-section-1 .wrap, .home-section-2 .wrap { background-color: #fff; }
And then you may need to remove the background-color on .home-even too, but that will affect the background-color width of your other home-sections too.
You shouldn't need a background-color on the widgets themselves then, but it doesn't hurt to keep them.
As for the gap between the header and .home-section-1, that is part of Parallax Pro.
You need to find this section.home-even, .home-odd { clear: both; font-size: 28px; overflow: hidden; padding: 190px 0 200px; text-align: center; }
and edit the padding line. 190px is at the top and 200px is at the bottom, and it will affect each of your home sections.
I believe if you leave the section above, and add this new section right below the section above, that you will be able to edit the padding on only .home-section-1 until you get what you want. First work on adjusting the top padding, and then the bottom.
.home-section-1 {
padding: 190px 0 200px;
}But that's probably a question for another thread though.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantGreat! And thank you for sticking too!
If you change the 33% to 33.333333333% it will line up better at the right edge with the full-width widget.
Here are some things to think about. It's much easier to work with images that are all the same size because then they line up by themselves.
Yours are:
brain - 127x106px
heart - 128x170px
hand - 125x189pxIf you used an image editor to add them all centered in a background that was at least 128px x 189px, then they would all line up as in your screen shot.
The padding is controlled by the line:
padding: 0 2.8%;The 0 is the top and bottom padding - above the images and below the text; you can change the 0 to 40px or smaller. The 2.8% is the left and right padding - you can make it smaller or larger and also change it to px, if that is easier for you.
You also might want a background-color on the entire .home-section-1 to make it look like the screen shot
.home-section-1 { background-color: #fff; }
All the best, Greg!
Marcy | Amethyst Website Design | Twitter
MarcyParticipantGreg,
I think you're missing a close bracket in your style.css.
At the end, you have this code:.
Find your first line below where you added the HOME SECTION 2
home-even .home-section-2 widget-area {
and add a } on the line below so it looks like thishome-even .home-section-2 widget-area { }
/* Adding columns for product areas HOME SECTION 2 */ home-even .home-section-2 widget-area { #column1-wrap { float: left; width: 200px; } #column1{ background-color: #FFFFFF; margin-right: 200px; } #column2{ background-color: #FFFFFF; float: left; width: 550px; margin-left: -200px; } #clear{ clear: both; } .home-section-1 .widget#black-studio-tinymce-2 { float: left; padding: 0 2.8%; text-align: left; width: 100%; } .home-section-1 .widget#black-studio-tinymce-3, .home-section-1 .widget#black-studio-tinymce-4, .home-section-1 .widget#black-studio-tinymce-5 { float: left; padding: 0 2.8%; text-align: left; width: 33%; }
I think that's all that's wrong now; that's why I could never see the code you added. This time I copied your style-sheet and tried it myself, and it's working for me.
Add all your images and text, and I'll look at it again.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantHi, Greg,
OK. It's my fault; I'm really sorry. I used the wrong selectors in the first place and then kept repeating my mistake. :-/
Chalk it up to me looking at it with tired eyes in the first place.You can use column classes, but what we are doing is putting each text widget into it's own column (using the column class code basically.) If you want all your images and text in one big text widget, I can write that for you, but I thought it would be easier if you have a different widget for each set of image and text. I think it will make it easier for you to edit, but let me know.
In the meantime, this will work for what you have.
You can leave the code at the end where you have it, but this is what you need:.home-section-1 .widget#black-studio-tinymce-2 { float: left; padding: 0 2.8%; text-align: left; width: 100%; } .home-section-1 .widget#black-studio-tinymce-3, .home-section-1 .widget#black-studio-tinymce-4, .home-section-1 .widget#black-studio-tinymce-5 { float: left; padding: 0 2.8%; text-align: left; width: 33%; }
Notice how the selectors are run together now with no space between .widget and #black-studio-tinymce.
Right now your text should be centered.
I added a text-align: left to each section of code, in case you wanted that, but that will affect the titles too, so let me look at it once you correct the code
Marcy | Amethyst Website Design | Twitter
MarcyParticipantI can't see any code added. Is it still there? I need to see it with the code.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantJust try the code above. It's Brad's code, but more specific for what I could see on your site.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantIt wasn't clear that this is what you asked in your OP, but I will try to help you.
You do need to target each specific id, if they all have different widths. But you do it with #So the first widget would be:
.home-section-1 .widget #black-studio-tinymce-2 { float: left; padding: 0 2.8%; width: 100%; }
Then you need:
.home-section-1 .widget #black-studio-tinymce-3, .home-section-1 .widget #black-studio-tinymce-4, .home-section-1 .widget #black-studio-tinymce-5 { float: left; padding: 0 2.8%; width: 33%; }
This should give you something close to what is in your image.
If you're using plain text widgets, the code would be:.home-section-1 .widget #text-6 { float: left; padding: 0 2.8%; width: 100%; } .home-section-1 .widget #text-7, .home-section-1 .widget #text-8, .home-section-1 .widget #text-9 { float: left; padding: 0 2.8%; width: 33%; }
You will need to adjust the ids and widths to match what you want.
Marcy | Amethyst Website Design | Twitter
MarcyParticipantFirst:
Right now in home-section-1, I count 9 text widgets (some are Black Studio text widgets), but there are 9.
In home-section-2, there are 2 text widgets, and in home-section-3, there is one text widget.Which section are you working on?
If you are trying to put 9 text widgets in home-section-1 and float them three across, Brad's code should still work for you.
Second:
Do not add that "id=....."to the code; you are breaking it.Just add the code below to your style.css just before the first @media section, and then let me look at it.
.home-section-1 .widget { float: left; padding: 0 2.8%; width: 33.333333333333%; }
Marcy | Amethyst Website Design | Twitter
MarcyParticipantI looked at your site and I have no idea why the <main> isn't being used by IE8. I guess this is something to look out for on the next site I work on. At least adding the extra div works!
All the best!
Marcy | Amethyst Website Design | Twitter
MarcyParticipantOK. That's what I thought about Simple Edits, but didn't have time to try it.
I'm glad you got it sorted!
Marcy | Amethyst Website Design | Twitter
MarcyParticipantYe, I tested the code before I posted it, and the 9 in both places was definitely needed. It sets and order for adding it. I didn't look at the Genesis code yet to see why 9, but that's something on my list now.
I'm glad you got it working!
Marcy | Amethyst Website Design | Twitter
MarcyParticipantfunctions.php
But I think you can try to use simple edits plugin too; I just haven't used it.
Marcy | Amethyst Website Design | Twitter
-
AuthorPosts