Features of my website are appearing wrong on mobile?
-
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: (visible only to logged in users)
-
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?
-
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?
-
This thread will be moved to the CSS Forum for you. Please do not create a duplicate thread.
-
-
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.
-
-
-
Okay that’s totally understandable, I do appreciate the help anyways. Keep up the good work :)
-
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.
-
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.
-
-
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/
-
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.
WordPress.com Forums 