Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to get 2/3 column in widget area??
- This topic has 6 replies, 2 voices, and was last updated 10 years, 5 months ago by Vagabond007.
-
AuthorPosts
-
November 14, 2013 at 5:41 pm #73027Vagabond007Member
I added a widget area after the header using the instructions I found here...click here. I modified it a little...no hover effect and I only need two areas instead of three.
I then used a text widget to add content to it. What I'm after is this....a video that takes 2/3's of the area with the other 1/3 being an opt in box.
At first in the one widget area I put the YouTube code. The other widget I put my Aweber code. Ratio wise, they appear to be ok. But, the opt in box goes below the video instead of next to it (I want it to the right of the video). See URL below to see what I mean.
I then tried using columns and only using one of the "After Header" widget areas. But so far I've only been able to find instructions on how to make 2-6 evenly spaced columns. And I'm not experienced enough to know what/how to modify that to the 2/3 and 1/3 look I'm after. And, it came out looking horrible anyway. For now, I switched it back to the first scenario.
My site is...
TheNiceJerk [dot] com
Any help is appreciated.
November 14, 2013 at 8:29 pm #73053stinkykongParticipantI think it's in your math.
.featured-one .widget {
float: left;
margin: 15px;
width: 70%;
}is too wide. It's change it to a width of 60% which fixes one problem but then you have responsive issues with your AWeber form which I guess uses pixels for its dimensions.
I would investigate the Genesis Enews Extended plugin which I am pretty sure can be configured to work with AWeber. I have used it with Mail Chimp. There are some code snippets you may have to copy/paste but once it works, it works very well in responsive design.
Web Design by Websentia Web Services
http://websentia.comNovember 16, 2013 at 12:42 am #73362Vagabond007MemberHi,
Thanks for your response. I made the changes and yes, they are now side by side. But, like you said, there is now a responsive issue. I then used the enews plugin. But, there is still an issue.
Looked around in the enews forums for a fix, so far I've come up empty.
November 16, 2013 at 6:36 am #73380stinkykongParticipantI don't know all the details you're to face but I think you're getting there since your new Enews widget does respond to screen size now. I'd look at adding rules in your media query section. Some screen width and below will want to have rules such as:
.featured-one .widget, .featured-two .widget {
width: 100%;
float: none;
text-align: center,
/*etc, etc, etc*/
}
Web Design by Websentia Web Services
http://websentia.comNovember 16, 2013 at 1:27 pm #73447Vagabond007MemberI did a search and was able to make the YouTube video responsive. But, still dealing with an issue when I check the site on my iPhone 5. The video appears to resize fine. It's the enews widget.
And I appreciate your help. I just have no clue about "rules". The text in the enews widget on my site is in a thin column (I assume the 30% part). I need it to go below the video on a smartphone screen and take up the entire width of the screen.
Would you be interested in fixing this issue for me, of course, for a fee? I don't expect you to work for free. If so, please let me know and about how much it would cost.
Btw, check out copyblogger.com to see what I'm attempting to replicate. Their site looks great, of course, on my iPhone.
November 16, 2013 at 2:08 pm #73449stinkykongParticipantI don't take work on from this forum. I assumed that with a custom site, that you had already done a lot of work and didn't go into great detail. There are some developers for hire listed on the StudioPress site. I have used Jennifer Bauman http://dreamwhisperdesigns.com/genesis-tutorials/load-sidebar-specific-pages/
The rules I suggested, you have managed somewhat thus far. In the media queries near the bottom of style.css, you can add particular rules for smaller screen widths. That's where I would suggest adding rules such as my recent suggestion.
.featured-one .widget, .featured-two .widget {
width: 100%;
float: none;
text-align: center,
/*etc, etc, etc*/
}Not absolutely sure that will fix all that you want...it's just a suggestive stab at the problem you're facing.
There's more to CSS that can be mentioned here but you can begin with what the community offers and learn from experience.
Web Design by Websentia Web Services
http://websentia.comNovember 16, 2013 at 3:46 pm #73458Vagabond007MemberThanks again for your help. I appreciate it.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.