I am using prettyphoto to display images and video in a gallery. However, the social buttons are getting truncated. I tried changing the overflow attribute to auto in the prettyPhoto CSS, but all that does is add a scrollbar. This happens regardless the size of the photo or video (see screenshots below). Is there a way to fix this?
Had the same problem.
Changed the CSS for the social buttons as so:
.pp_social { float: left; margin: 0; width:450px;}
.pp_social .twitter { float: left; width: 90px; }
.pp_social .facebook { float: left; margin-left: 15px; width: 80px; overflow: hidden;}
Hope this helps.
Related
My toggle menu bar is not showing in mobile view. my website is http://gtcgroups.com/ . When I decrease the window size the menu is not showing. How to fix it. I am currently using WPtouch plugin but its not showing logo of website that's why i want to do it through custom code for toggle menu.I have tried different codes but not working
header .menu .nav {
display: none !important;
}
header .menu.active .nav {
display: block !important;
}
This is because of your written CSS in your custom.css
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
}
replace it by
.header-wrap {
height: 30px;
width: 1200px;
margin-top: 0px;
max-with:100%
}
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
This code automatically adjusts the page height successfully:
#primary {
height: 400px;
}
Unfortunately, this does not display the page same for everyone if they have different screen resolutions. I need something that will display the site the same regardless of screen resolution, and display it the same on mobile (not a mobile site, but the same sit on mobile, without scrolling. That's what they want.)
I have seen this done on a Joomla site, but can it be done in WordPress?
Thank you very much - I really appreciate your help.
This is the code I ended up with, fixing the menu at the bottom and having the text scroll above it. The height is 57 to allow my menu buttons to show on mobile.
body {
overflow: scroll;
}
#colophon {
background: white;
bottom: 0;
font-size: 13px;
height: 57px;
position: fixed;
padding: 0 30px;
margin-bottom: 0;
width: 100%;
}
.entry-content {
padding-bottom: 30px;
}
For the last few days I have been thinking and working on a website. When playing around with resizing i found out that the site doesn't do such a good job. I think the site should look good from 1024 by 768 and up.
So when resizing the page below to the minium dimension you see the the top menu will get squashed together. Eventhough there would be enough space for all menu items. And also I would like the images to get resized properly to the window size.
Here is the link
http://bit.ly/NpE9cF
Would someone please help me to give me some practical advice?
Should I do the resize work with something like jquery? Or can i fix these issues in css?
Thanks very much.
In style.css you have some fixed width for ul#primary li a {}.
Change this width to some % value. And also add some min-width so that after certain resize the width will not decrease further.
change
ul#primary li a {
display: block;
float: left;
margin: 0;
padding: 20px 20px 11px;
width: 192px;
}
to
ul#primary li a {
display: block;
float: left;
margin: 0;
min-width: 100px;
padding: 20px 20px 11px;
width: 20%;
}
in style.css file.