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
Related
I'm having some trouble trying to get my Nav Bar to adjust correctly when viewing on mobile devices. When I go to inspect (IPhone 12 Pro) the "about" link in my nav bar goes to the next line. I'm not sure why it does this when there is plenty of space for it to be on the same line above.
I'm not sure if this can be fixed with CSS or if it has to be done via a media query? Any guidance would be appreciated as I'm currently a newbie to coding.
Link to my website https://jpark42.github.io/portfolio-website/index.html
Even though you should post your code into your question and not have links to external websites that make us chase your code, i will happily try to land some help.
To have your links aligned even on small screens, follow these steps:
apply align-items: center to .page-header. This will vertically align the Facebook logo image and the links.
apply those rules to .navigation-list (you can keep the rules that were already applied):
display: flex; /** make the ".navigation-list" a flex container */
align-items: center; /** centers the links vertically */
justify-content: end; /** pushes the links to the far right */
flex-wrap: wrap; /** if the space is too small to display a link on the same line yhe browser will intelligently push the link(s) onto a next line */
margin: 0; /** removes the margins added by the browser (that should be done in a "reset" stylesheet) */
the above steps should bring you very close to your goal. To have better responsiveness, only the above rules won't suffice.
Learn more about flexbox on MDN.
Even though its on 310px width (no phone has that width), you should readjust your margins and paddings. For example on ul element you should readjust padding:40px to padding:0, margins of li elements too. Your screen size is smaller, but margins and paddings are staying same. They are not so friendly to new people.
In iOS 15, Safari changes the behavior of the address bar. It floats somewhere near the bottom of the page.
This can greatly affect the design and user experience of the page.
Are there indicators to detect the address bar, know when it’s present and know its location?
Pad your webpage at the bottom using the environment variable safe-area-inset-bottom like so:
body {
padding-bottom: env(safe-area-inset-bottom);
}
This session by Jen Simmons goes over how to deal with Safari's new address bar: https://developer.apple.com/videos/play/wwdc2021/10029/ (see from 16:44 min)
The floating tab bar is considered to be beyond the lower edge of the Safe Area. You can get the Safe Area’s inset from the viewport’s bottom in CSS using env(safe-area-inset-bottom).
More about supporting the Safe Area in WebKit: https://webkit.org/blog/7929/designing-websites-for-iphone-x
The behavior for this is changing a lot. I recommend adding a DIV like this to your page to play around:
<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>
This will give you the word Hello! in a tight red box with the
four safe margins applied. You'll see these margins wherever on the page this div is - you don't need to make it a footer or header. It's a very good aid to visualize what's going on.
As of Safari 15 current beta there is :
No longer a floating address bar.
No longer any value set for env(safe-area-inset-bottom) to avoid interfering with the bottom address bar.
env(safe-area-inset-bottom) is set for the purpose of avoiding the home screen indicator bar.
Setting 100vh for the height of your page will prevent the address bar appearing at all unless somebody clicks on the site name at the bottom of the screen.
However, with 100vh it's possible for items to hide underneath the bottom bar at this time. I'm really hoping they'll fix this behavior to set the safe area.
So for the red box to actually appear to have any padding you must:
Switch to 'Single Tab mode' (address bar at top) in Safari settings.
Scroll the page up and down to make the address bar show and hide.
Notice the box will have bottom padding only when the home screen indicator is visible (the white bar at the bottom of the screen).
You can use ObserveResize and Css for solve attaching absolute dom element on the bottom of your screen.
There is the sample: JavaScript es6 + css solution
A different solution to this issue (that works with 100vh) that I've had success with is:
min-height: 100vh;
min-height: -webkit-fill-available;
So far you can't really detect the size of the address bar because the env(...) inset variable was cut in the final release. But! The address bar does affect positioning on the page.
I'm not exactly sure how it determines what elements to move, but page elements can react to it. For example, take a look at Twitter's navigation bar when viewing twitter.com on a mobile device.
If you want similar behaviour ⤵︎
Make a div with fixed positioning
Set it's bottom to 0
Be careful about setting height of the fixed div to 100vh as I think this squeezes it out of the address bar's reactive area.
Please, anyone, post comments and updates about this issue as it's changing frequently.
EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/
I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.
Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.
Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).
What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?
Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
#media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I am trying to change our website ( www.enyx.sk ) from a floating responsive theme, to achieve a static width, which would address also lower resolution tablets and monitors.
The problem I having is with the menu items in the top navigation. The parent div itself is absolutely positioned but, since they are generated and need to be next to each other, the items are positioned relatively. Hovewer this causes a problem, when I try to resize my browser, or I check the resolution on the Nexus 7 ---> here
then the menu items appear one under another, to fill the sreen.
What I want to achieve is that they stay in one place like the "mozaic" under the menu, but I can't figure out how to do this.
Thanks a lot
Just take a look at your basic.css (should be within the ubermenu-plugin). Almost all widths there are given in percent.
On line 758 you can find:
#megaMenu.megaResponsive ul.megaMenu > li { width: 100% }
Furthermore on line 862 there is:
#megaMenu.megaResponsive ul.megaMenu > li { width:50% }
Delete both.
At least there is the following code in line 81:
#megaMenu.megaMenuHorizontal ul.megaMenu { width: 100% }
Change it to a fixed width (e.g. 1140px). Now everything should work in a correct way.
If you use Firefox you can use the add-on Firebug, which is a big help looking for that kind of stuff.