Sometimes when viewing responsive sites I see two div's which appear next to each other in full screen but one on top of the other when the screen size is smaller.
This is a simple use of max-width=% , width=px and float
However
Sometimes the one which is on the RIGHT in full screen mode appears on TOP when they stack on top of each other on a smaller display.
The first behavior requires the one on the right to be the first one in the DOM
but the second behavior requires it to be the second one in the DOM
and the HTML file is the same for all screen resolutions.
So how is this effect achieved?
Well, I found your question little bit confusing but this is what I've understood :
You want to achieve responsive web design
You want sidebar to be on right on desktop width
When you open the website on mobile / small screen, sidebar or the content from right should go on top instead of bottom.
If I am correct then this is the way to do it..
Place right side content above left side content and add property float:right to it..
Place the left container below it..
Apply media queries..
Demo using Bootstrap : http://jsfiddle.net/YEUwN/95/
For three divs, you could use this css trick.
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; }
#block-2 {display: table-row-group; }
#block-3 {display: table-header-group; }
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
http://jsfiddle.net/47T89/
That's going to display
third
second
first
And if you want more, you gonna have to wait it's actually a W3C working draft
http://www.w3.org/TR/css3-grid-layout/
Related
I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
have two images inside
On zooming the screen 2nd/last image goes down i.e. top bottom fashion.
I want to fix the span position so that on zooming in/out images should adjacent(side by side) to each other.
Remove bootstrap class on your html code
and write manual css code like this
.your_class {max-width: 40%;}
This one for 350x150
I guess you need max-width.
So you change for your image. I hope it will work
I am working on ASP.NET MVC3 application using Twitter-bootstrap but I think that this problem is more likely to be solved with pure CSS still a bootstrap solution is also welcome.
I have a several links in my vertical menu (for the purpose of my example they are 3). Each menu has
width: 100%;
min-width: 40px;
The menu is within <p> and each paragraph is wrapped in div with:
width: 30%;
Here is my JsFiddle link. The problem is that as the screen get's smaller (smaller media, or just resizing) the menu is expanding towards the bottom but in my real design expanding is acceptable (desirable even) but I want this to happen towards the top of the page so the bottom line stays on the same level for all menus. How can I achieve that?
I think you might need to give it a height, since you only have width the browser only checks the X axis ! Try it out , height:xx%;
I am still in the learning process and newbie at Stackoverflow. Sorry about any stupid behavior from my side.
I have a WordPress theme, and it's already responsive . I made a page, where I made 3 boxes (with inline CSS to make their background colorful, and one box floats on right, whereas other 2 float on left).
Please check that page and the 2nd box here : About Us
Now, when I check site from mobile, I see that the 2nd box floats on right and goes out of screen. I am not much aware of how division hierarchy work in CSS, so I tried few things in media queries, but I couldn't succeed. I gave that 2nd block <div id="image2" style=".....;float:right;">
and now in media query, I want it to be float:none;
Can anyone point me to how to do this? What is correct hierarchy that I have to put inside media query (which is there in a theme file).
I managed to change few things with the logo via media query, and I got the idea that I had to write
.header-wrapper .logo-wrapper {.....}
I just don't know how to do the exact same thing with this block of text.
Help is appreciated.
Thank you!
your image2 has a fixed width on both mobile and desktop
#media (max-width:767px){
/* try this */
#image2{
width: 100%;
}
}
My advice to you: AVOID INLINE STYLING...
I am an HTML/CSS novice and am trying to build a website for my wedding next year. On the main page here I have identical ribbon images on either side of my main div. What I want to happen is that the site remains centered no matter the screen resolution (showing more or less of the ribbons on either side depending on the resolution). It seems to work for the left ribbon but the right does not want to cooperate. The issue is particularly bad on iPads where the entire site appears left justified and the entire right ribbon is visible.
Any help would be welcome,
thanks.
apply the following css to html:
overflow:hidden;
applying overflow:hidden to the img won't work, the img isn't overflowing relative to its own width. (in contrary to how you think the overflow property would work)