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...
Related
Please help me out with a CSS Grid problem that I am having...my last image continues to appear larger than the others in my .featured section when I try switching to grid during a media query #700px.
This is a start to a portfolio of mine, but as I decided to make my .featured section, or my images to be in grid format instead of flex like the rest of the page, suddenly my last image is showing up larger than the others.
Could someone please explain what I am doing wrong? I'm stuck right now trying to figure out why this is happening. Thank you!
Here is the link and code to my page: https://codepen.io/elcapitan23/pen/wxpmYP
Also, here is a screen capture of what I am currently dealing with:Portfolio
The css class .featured-item has a last-child style
.featured-item:last-child {
margin-right: 4px;
}
Which is the culprit, either remove this class, or override this style for last div.
Codepen link
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
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/
I'm designing this site: http://ecostructionny.com. I'm just at the point where I'm laying out the home page and I'm a bit stuck. I want a footer row at the bottom that lists contact info, and then directly above it is a row of 3 blurbs of information. The background images are the main visual feature of the page, so I'm trying to leave space for them to show through.
Can anyone help with some suggestions? If there's a better way to lay it out, I'd love some other advice.
Thanks!
There is a good footer tutorial at
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
The demo page is here:
http://www.lwis.net/profile/CSS/sticky-footer.html
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
Of course you know you will get as many ideas as people that respond. Everyone's opinion is different when it comes to design. Based on your statement above I would direct you to the bootstrap sticky-footer example that comes with the download of bootstrap. In addition, in my experience, it works better if you do some work and resize the photos so they appear natural in the carousel. When images are stretched to fit it distorts things a bit. Take some time and experiment. Also, I have found that using the hero template page with bootstrap works really well for the thing you are trying to do. Experiment around.!!
Tony Tambe: bootstrap has all the responsive code yes, but you will have to add some #media queries to your styling to make the header resize and the underline under the title move down etc. You can add #media query in the html page using a style element (In the head section). Keep experimenting, is looking good.
I have a fixed image placed using this code:
The problem is that in bigger screens the image is placed in the middle of the screen instead of in the left bottom corner (it works fine in 15" screen)
How do I fix this using inline-css style= (attribute) code in HTML?
Okay, you say no CSS but you have inline CSS in your code.
Second, why are you using position: fixed with right: 865px?
The reason the image appears in the middle on larger screens is that you're specifying a direct pixel value. You'll want to either change
right: 865px;
to
left: 0;
Or change the link to float left instead, such as:
float: left;
Either way, why are you putting CSS inline? It is not the recommended or correct usage of CSS. CSS is designed to separate content from styling, so putting it inline defeats the purpose.
If you want it on the left corner of the screen you should be using left:0 instead of right:865px
If you provide a jsfiddle I can help you more.
Edit:
About mobile sites like you asked me, most mobile browser doesn't support it pretty well so we use JavaScript to do the job, here is a bunch of examples and much more info http://bradfrostweb.com/blog/mobile/fixed-position/