I'm building some responsive WP themes with the idea/hope to make it super-easy for an end-user to setup a simple site that looks good. This is my first attempt at learning responsive as well and can't quite get a complicated logo / company name / tagline feature worked out. Proportional, centered, unknown widths, oh my!
You can see a mockup of some of the different situations we'd like to handle at http://screencast.com/t/G8O1G4aY. The left shows a rectangle logo, a square logo, then a square logo with some text and a square logo with more text.
The right side shows how we'd like the responsiveness to look, as the screen gets smaller. The image starts reducing from a max-height of 200px-ish to 100px-ish and the font-size starts reducing as well.
Hoping to not have to rely on breakpoints to set the sizes. We've already accepted that were going to have a 'you have JS turned off, its ugly this way' message, so something like http://simplefocus.com/flowtype/ to adjust the font-sizes would be quite alright.
Can it be done?? Can get into more javascript to solve if needed, but hoping for as much CSS handling as possible.
Thanks much for any help! Keep getting this piece or that - but can't get them all together.
Philip
Related
I am administrating the homepage of our local sports club which can be found under svwalddorf.de
The page runs with typo3 10.4.22 with bootstrap package 11.0.3.
The basic template of bootstrap leaves a lot of empty space on each side of the centered content area
On our site this currently looks like this. (unfortunately not allowed to include images yet)
While this looks pretty nice, it wastes a lot of space. Therefore, I would like to change the size of the padding areas (marked red) to have more room for content.
I am pretty sure that I just need to find the right line in the correct css file. After all, the grey carousel element near the top uses the entire width. I just do not know what to look for.
Can someone point me in the right direction?
Thank you very much in advance!
As far as I noticed it's super popular and common problem, but all solutions that I have tried failed at the end.
I have a test-ish website: https://mojastrona.hekko.pl/baltyk-strona-glowna/
And what I can't achieve is to fit the background image to any resolution.
Here are my settings for the elementor section:
But that doesn't provide perfect image fit. It is being cut. I tried to add some solutions into .css file, that I have found on the Internet, but none of them works.
What you're trying to do is next to impossible (within reason).
Let's say your image has dimensions of 4:3. Now what happens if someone looks at your website on a 16:9 monitor? The container (and thus the image) would have to either have some blank space above and below OR to the left and right.
There are several reliable alternatives to getting what you want:
Position your image so that the most important pieces of the motive is always present (eg. "center top" so that the text in the top of the image is always visible
Add a "min height" to the parent container - the section would be the obvious choice. Playing around with VH/%-units might give you a more reliable result
Place your image as a simple image-widget instead of as a background-image. Set the width to 100%. Make sure your section is set to "Full width/no gap". Your image will now always be the full width of the screen, without being shrunk by the parent container.
Obviously #3 comes with several limits, as placing content on top of your image is made much harder.
I have a 5 column responsive layout for a gallery page. I did not code it myself, having found the code for exactly what I wanted somewhere on line. My coding skills and understanding of CSS positioning are evolving, to put it nicely.
It works well until I zoom an image. The image zooms properly, but the right edge is showing as "under" the image to the zoomed image's right.
Looking for the answer I found that the container must have a relative position and the image to have an absolute position for z-factor to work (or so I understood what I read). When I set the image position to absolute, each image takes up the entire screen. I tried a "clear:both" on the hover property to no avail.
The problem exists in any screen width from 550px up - below that the display is single column.
Both the code and the on-page css is valid. Link is http://www.artfromny.com/gallery2.html
Any help appreciated; prefer no java solutions since I barely understand the basic concept of it.
Thanks in advance to all of you who spend so much time helping others get the hang of coding. The last language that I truly understood and used properly was dBase iii so I am kind of struggling here :)
Art
I have searched for this question, but I can't find a good solution, so maybe you guys can help me.
Link
If you look at this site, you can see that in each side (left/right), there is a banner. The width for these two are 160px each. the website is using the WHOLE screen at any givin time, but the ads are still 160px no matter what, and the game in the middle is the one shrinking to fit the screen, both vertically and horisontally.
How can I achieve this, and is it even possible to do in css alone? I've looked their code, but I can't really figure it out.
Banner provided by thirt pars (like AdSense) can't generally be resized for an obvoius reason: the advertiser provides, one or more images for the banner, possibly of different sizes; but that sizes are generally not intended to be "scalable" 'cause in that case the result might suck...
You can scale the container, of course, but you are asking about ADS...
I have been trying to code a responsive thumbnail group that I'd like it to respect to a few rules.
I came very close but the implementation always end up not satisfying at least one of the rules. In other words when I try to do one thing it always cancels the other.
In summary, what I am trying to achieve is something like this -
http://postimg.org/image/4yx6poscz/f57d6517/ (I wasn't allowed to post a picture, sorry)
So basically, what I am after is;
When the user resizes the window the thumbnails (consist of an image and some basic HTML) will shrink up to a point.
When the breakpoint is reached, the most left one will disappear and the rest of the thumbnails will return to their original size.
Continue until the min-body size where we just display the x-axis scrollbar.
So, referring to the image, providing that no resizing is done just yet, the items will shrink, lets say until 20% and then Item 7 will disappear letting free space to the rest of the row to expand to their original size.
I am currently using the latest version of bootstrap however, as you may guess col-lg col-md and etc. classes are not really helpful in this case. I have come up with some custom breakpoints but I can't get my head around the shrinking back to the original size issue. That is where I get stuck.
Also I think it's worth mentioning that Ive been trying to come up with a solution that is pure HTML and CSS however I am definitely open to JS solutions as well.
A good example would be spotify's webplayer (play.spotify.com) thumbnail examples.
Thank you very much in advance for your suggestions.