Community Forums › Forums › Archived Forums › Design Tips and Tricks › Text on Genesis Sandbox Featured Content widget cut-off on mobile phone
Tagged: mobile responsive design
- This topic has 3 replies, 2 voices, and was last updated 9 years, 1 month ago by treenao.
-
AuthorPosts
-
February 9, 2015 at 3:29 pm #140248treenaoMember
Hi all! I have the Genesis Sandbox Featured Content widget on a page with widgetized sections on my blog:
My issue is in the section for "Books I've Written", the text displayed in the widget gets cut off when viewed (portrait) on an iPhone. It's fine on any other device.
I don't know where and what in the CSS to change to correct this. Any help would be appreciated.
Lastly, I'm using the Daily Dish Pro theme.
http://theeverydayprojectblog.com/inesbyao-author-project/February 9, 2015 at 7:21 pm #140273PorterParticipantFind this line in your style.css:
middle .featuredpost .entry { width: 340px; }
Change the 340px to 100%, that seems to do the trick from what I'm seeing. What this does is allow the text to use the entire space, no matter what the space given.
February 10, 2015 at 4:38 pm #140393treenaoMemberHi Porter,
I tried it, but it's still not working 🙁 I don't know what's going on because the exact same widget that's in the widget area below is showing up fine on iPhones and smaller devices. What am I doing wrong?`/* Featured Content
--------------------------------------------- */.daily-dish-home .entry,
.daily-dish-authorproj .entry,
.sidebar .featured-content .entry {
margin-bottom: 30px;
}.before-footer-widgets .featuredpost .entry {
display: inline-block;
max-width: 180px;
margin-bottom: 10px;
vertical-align: top;
}.before-footer-widgets .featuredpost h2 {
font-size: 16px;
}.daily-dish-home .entry-content p:last-child,
.daily-dish-authorproj .entry-content p:last-child{
margin-bottom: 0;
}.home-bottom,
.home-middle,
.home-top,
.authorproj-bottom,
.authorproj-middle,
.authorproj-top{
overflow: hidden;
}.home-middle,
.home-top,
.authorproj-middle,
.authorproj-top{
margin-bottom: 40px;
}.home-middle .featuredpost .entry{
float: left;
width: 100%;
}.authorproj-middle .featuredpost .entry{
width: 100%;
}.featured-content .entry ~ .widget-title {
clear: both;
}.featured-content .entry ~ .widget-title + ul li {
border: none;
width: 100% !important;
padding: 0;
}.home-middle .featured-content .alignnone,
.authorproj-middle .featured-content .alignnone{
margin-bottom: 32px;
}.home-bottom .featured-content .entry-title,
.home-middle .featured-content .entry-title,
.authorproj-bottom .featured-content .entry-title,
.authorproj-middle .featured-content .entry-title{
font-size: 24px;
}.home-middle .featured-content .entry:nth-of-type(2n+1),
.authorproj-middle .featured-content .entry:nth-of-type(2n+1){
clear: left;
margin-right: 40px;
}.home-bottom .featured-content .entry,
.authorproj-bottom .featured-content .entry,
.sidebar .featured-content .entry {
border-bottom: 1px dotted #ddd;
}.sidebar .featured-content .entry:last-child {
margin-bottom: 0;
}February 13, 2015 at 2:38 pm #140751treenaoMemberI figured it out! And the fix Porter recommended DID work. I just needed to refresh the cache! Silly me!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.