Features of my website are appearing wrong on mobile?

  • Author
    Posts
  • #1409960

    chrismhmoore
    Member

    At the bottom of each of my posts is a ribbon tail like graphic that is part of my branding. Unfortunately when I view them via mobile they do not fit the width of the post. How would I go about fixing this as it really doesn’t look good at all.

    Thanks

    The blog I need help with is chrismhmoore.com.

    #1410087

    timethief
    Member

    Confit is a responsive width theme. Responsive width means the layout adapts depending on the size of the device being used to view your site. When responsive width themes are viewed on mobiles sidebars appear below the posts in order to provide as much space as possible for reading.

    Go here > Appearance > Mobile and disable the mobile theme.

    Is this actually a CSS editing question that belongs in the CSS Forum?

    #1410113

    chrismhmoore
    Member

    Thanks for your efforts but it was all ready off and I only thought to enter this forum into the CSS Forum because i added the ribbon tail using CSS.

    The following is the coding used to add the ribbon effect:

    .site-content article {
    background-color: rgb(255,255,255);
    background-color: rgba(255,255,255,0.9);
    position: relative;
    margin-bottom: 106px;
    overflow: visible;
    }
    .site-content article:after {
    background: transparent url(‘http://chrismhmoore.files.wordpress.com/2013/07/ribbon1.png?w=618’) center bottom repeat-x;
    bottom: -56px;
    content: ” “
    display: block;
    height: 56px;
    overflow: visible;
    position: absolute;
    width: 618px;
    }

    Any other thoughts?

    #1410114

    timethief
    Member

    This thread will be moved to the CSS Forum for you. Please do not create a duplicate thread.

    #1410118

    chrismhmoore
    Member

    Okay great that works, but I am unable to find it now. Can you link me?

    #1410119

    timethief
    Member

    Link you to what? This thread will moved for you by our Moderator. You do nothing except wait for that to happen and for another Volunteer who provides CSS Help to assist you.

    #1410204

    chrismhmoore
    Member

    Not sure why, but I haven’t heard from anybody yet. Should I submit it again?

    #1410211

    raincoaster
    Member

    No. If you don’t hear from anyone it means nobody has the answer.

    #1410215

    chrismhmoore
    Member

    Okay that’s totally understandable, I do appreciate the help anyways. Keep up the good work :)

    #1410335

    That’s happening because you’ve manually added the ribbon but you set it at a specific width. For mobile, it would probably work better as a percentage. You can set that up using a media query for a max-width:

    @media (max-width: 640px) {
    	.site-content article:after {
    		width:100%;
    	}
    }

    You may want to adjust the 640px value larger or smaller depending on what sizes of mobile devices you want to cover. Try experimenting until you find the right number that works best for your content.

    #1410336

    chrismhmoore
    Member

    Wow thanks that worked perfectly on my home page, but unfortunately it is not appearing correctly within my portfolio pages. Think you are on the right track though.

    #1410337

    chrismhmoore
    Member

    That was on my iphone, but seems to be appearing okay on my ipad…

    #1410338

    Did you try experimenting with the 640px number? I probably didn’t guess the exact right width before.

    Also check out this page: http://www.stephentgilbert.com/mediaqueries/

    #1410339

    Hey, I just checked http://chrismhmoore.com/ from my iPhone, and the ribbon and posts both look full-width to me.

    I have an iPhone 4S running iOS 6.1.3.

The topic ‘Features of my website are appearing wrong on mobile?’ is closed to new replies.