I have a CSS problem with my responsive website. So on desktop browsers all content is displayed good, but I notice problem on mobile devices. Here is screenshot:
So on my website all the main content in mobile view is slightly moved to the right, so no blank consistent right blank space as left. You can see it on my screenshot link - subscription box is not centered, and similarly all content.
The problem is in the
.wrapper .sixteen.spans {
width: 940px;
padding-left: 15px;}
}
at https://techmonegy.com/wp-content/themes/frisco/style.css
Those values are set for all media. You want to set the width to much lower values for mobile... or don't set it there at all.
Related
I'm building a webpage for a client that I inherited from another developer. The link is: http://up8.431.myftpupload.com/. The client would like the phone number and the social icons in the top bar to display in the same style across all devices:desktop, tablet, and mobile. She doesn't like how when the display gets small enough the phone number and social icons stack on top of each other. That's fine but if there's no room to display them left and right but if there is, she would like to keep the same style. Problem is, I can't figure out how to make that happen.
Upon inspecting the element, I notice that each block has a width of auto, or whatever it needs to fit in. I've tried giving each block a display:inline rule in the hopes that they would take on the content width and align left to right and then I can just float the social icons to the right.
Tried something like this:
#top-bar-content, #top-bar-social
{
display:inline;
}
AND
.top-bar-left, #top-bar-right
{
display:inline;
}
What I hoped would happen is both blocks would display inline, back to back and I could just float them left and right respectively. What actually happened is the phone numbers changed its width to fit the content and floated itself to the left exactly how i wanted it to. The social block however, did not. It lost its dimensions; upon inspecting the element I find its width and height are 0x0. It remained in the same spot. Like I said, in my head I expected it to adopt its content width and sit right next to the phone number.
I'm sure this is just a noob error and I'm just not seeing what's in front of me. I really appreciate any help in advance.
I would change the parent div that contains both the number and social icons to display:flex. Then add justify-content:space-evenly or space-around or space-between (experiment between them) to the same parent element.
So you will have to use a media query to apply this for mobile devices only. When this is applied on desktop devices there is some interference from other classes and "::after" pesudo code.
#top-bar-inner {
position: relative;
display: flex;
justify-content: space-evenly;
}
This will do the trick
Ive been on multiple website where onload where the website is zoomed out to keep resolution and therefore stopping overlaps on the mobile page.
Im not sure i am explaing my question correctly. As i am a new member, i will add links to the differences.
I have tried some css3 media queries and some meta tags i have found online but nothing is working for me at the moment.
Here is the link to my site:
http://conorpendlebury.com/
As you can see from the image below there is overlapping with the navigation bar which pushes the content too far giving a squished appearance.
http://conorpendlebury.com/Images/Screenshot.png
Are you trying to make your #Sidebar to overlap your #MainContent and #Footer when activated while #Bio wont squish?
If so, make your #MainContent and #Footer with position: relative and z-index: -1 and remove whatever is making their marginLeft equals to document.getElementById('Sidebar').style.width while activated.
If you intended to make it squished, you need a function to recalculate and reapply css to #MainContent and #Footer.
To build a offcanvas navigation you set the page to translateX the size of the navigation. So the container keeps the width.
Here is a example.
It's possible to code this without JavaScript.
I'm having a strange issue and am hoping someone can see what I can't.
In a mobile view only, I am getting a right margin that is outside of the body. This only happens if I am using a device emulator or looking at it on an actual phone.
The red arrows point to the strange margin.
Have a look here: http://chizzledesigns.com/mobileissue.html
Thanks for any help.
The padding-left for the signup form in footer is causing the page to show the scrollbar.
footer > div.social-media, footer > form#signup {
padding-left: 10%;
}
On my client’s site I’m using Magnific Popup to show the license agreement for their product when a “show agreement” link is clicked. So I’m using the inline type for a big long block of text. It works perfectly on the desktop. But it gets all messed up at the bottom on mobile.
If I understand correctly, at desktop views Magnific Popup sets <html> to overflow: hidden and the popup to position: fixed. At mobile views it doesn’t do this.
This would be fine, except for that my popup is so tall that it exceeds the height of my page. This means that it starts looking broken at the bottom.
I’d love to make it work on mobile/iOS as it does on desktop, but I’m starting to doubt that this is even possible. If anyone has any ideas I'd love to hear ‘em. Thanks!
You could add max-height: 100%, overflow-y: scroll on the popup. This way the biggest it can be is the size of the viewport, but users can scroll within it.
for Magnific Popup - v1.1.0 - 2016-02-20 what worked for me was
.mfp-bg,
body.mfp-zoom-out-cur {
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
}
mfp-bg is the background that can get larger than viewport and and allow scrolling
I am creating a page that does not scroll vertically. Here is the problem page for reference - http://horizonwebtest.zxq.net/knowledgebase/
It has worked well with the exception of 2 things:
When viewing on iPad (possibly other tablets), the footer is pushed up approximately 10 px and the background image shows below the footer.
More importantly, on the above linked page, when I click on a link for an anchor that is inside a div, it scrolls the page up, showing space below the footer and partially cutting off the menu.
Is there something I'm missing?
I was able to fix it by doing the following:
1.) Setting the h6 inside the .footer-left.fltlft div to margin-top: 20px;
2.) Removing the padding-top: 20px from the div itself
3.) Setting margin-bottom:0; on the h5 inside the .footer-right.fltlft div.
As a side note, do your vertical text centering with line height, it works a lot better and will help prevent these kinds of issues.
please set your content box central_container Flexible (percentages) its better for view in any devices then try to set footer as #mash's answer . ;) ( margin-bottom:0; )