Thanks for the great answers last time, I had been working on that problem for days, and someone solved it in ten minutes. Amazing!! So now I have another question for this talented community!
I'm using Sitefinity for this project; long story short, I don't even know where to access the CSS file, and accessing it would probably break the site (as my boss tells me). So everything has to be done with inline styling.
Here's the setup: there's a bunch of text (in a ul), and an image. The text wraps around the image, which is small enough that the text is squished to the left at first, then continues in its full width underneath.
When the screen gets too small, the text starts wrapping around the image (which has been floated right) in weird ways; one long word can make the text stop and start again after the picture (I've already suggested adding word-break for this, but it's a no-go).
Here's what my boss wants: image floats to the right of the text on larger screens, then floats above and center on smaller screens. Again, no stylesheet, just inline styling.
Some attempted ideas:
Use asides: can't. That needs the stylesheet. (Unless someone who knows this knows a better way!)
Use padding on the image: tried. It messes up the formatting; what works to push everything underneath on mobile squishes everything to the side on desktop. (If someone knows a better way, let me know!)
Use JS: can't. Basically, everything has been styled somewhere deep within the code, so I've just got a tiny HTML text box to work with, no tag to work with at all.
Thank you for all suggestions! This is a talented community!!
You should us a CSS widget, add some classes to your then within the CSS widget write the appropriate media queries, if you need this to affect more than one page put the CSS widget on a template instead of an individual page.
Related
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
I've attached two images showing the effect I'm trying to achieve, and what's wrong with the way I'm currently doing it. The first is displayed on page load, the second when you click on the down arrow.
The second partially obscures the first, currently using a negative margin. My current version has an invisible element underneath the leftmost box containing the icon, which has the same class as it that handles indentation. But At certain screen widths you get the effect below, where you can see the expanded section's border running halfway up the original element.
I've tried a few things to get rid of the glitch, but it's feeling a lot like pressing down bubbles - either they create worse problems, or the same problem at different widths.
I have the strong suspicion that I'm doing this all wrong, but I haven't thought of a better way to generate the same effects - border around the whole thing, text from the expanded element getting pulled up to approx where the original summary text was.
I can afford to use fairly modern CSS for this - our audience tends to be pretty high tech. In case relevant, I'm using a transition animation for the height increase, so it needs to be something consistent with that.
Before:
After:
The simplest fix for your problem is to make the left icon area overlap the rest (using z-index and position:relative) and extending it by 1px (so it covers the border in all cases).
Update your question with a code example and I'll update my answer with the fix, if the principle outlined above is not enough.
The alternative is to empirically determine the widths at which the border is misplaced and adjust the width of your dropdown, using #media queries.
Another rather important aspect which you don't seem to have determined is if the bug is specific to any particular browsers/devices.
As a side-note, I find quite a few questions similar to yours have one (rather silly) common cause: the developer has unknowingly changed the zoom level of their browser, pressing either Ctrl++ or Ctrl+-, viewing the page at 90% or 110%. Make sure you're developing at a zoom level of 100%, by pressing Ctrl+0.
I'd also like to suggest you take a look at How to ask to get tips on improving your question(s), to increase your chances of getting better answers.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
I have a couple of questions about the problem of hiding text inside an anchor tag and only displaying a background image.
Note to those about to bombard me with links to other articles and tell me that this is a repeat question: I have scoured this site and the web in general and read the solutions (and by solutions I mean mostly hacks) people came up with. What most people seem to be doing (or have done up until recently) was the -9999px hack. Also popular is/was wrapping the text in a span and doing something like this or visibility: hidden.
Now, I personally think that "hiding" the text would really only make sense in the first place if it was hidden dynamically, i.e. displayed only if the background image wasn't loading (for whatever reason). However, all the "solutions" I found effectively remove the text completely or at least hide it permanently so even if the background image isn't loaded, the text still wouldn't be displayed.
So here are my questions:
Why would one want to have text and then permanently hide it at all? Why not just leave the anchor empty - i.e. just don't put any text in it - and only have the image displayed? Why have text and then go through the headache of figuring out how to hide it? What's the point of that? Am I missing something here?
Now that we have CSS3, are there actual non-hacky, dynamic ways to hide text when the background image is displayed and have the text appear when the image - for whatever reason - fails to load? I couldn't find any resources so I am assuming this is not supported but maybe one of you ninjas knows better?
There are different possibilities why to do that:
Search Engines scan the web and also gather content that is visually hidden. The site gets better in terms of semantics and has a higher page rank.
Many visually impaired people rely on content that's read to them by screenreaders. Sometimes text in the alt-tag is just not enough. Background images don't even have such a tag.
To your second question:
To me there is no known way to check if a background-image is successfully loaded and is also shown (a totally different story!). CSS only styles content according to defined rules. There may be a javascript way to do it, but in my opinion it isn't worth the cost because mostly this text isn't really a fallback. It has a different purpose as stated above.
This works fine on my computer but im wondering if its a good idea in terms of accessibility, etc.
I have a page of product listings, and I want each listing to link to a product page. The listing is made up of an image and a few photographs of text.
I want the entire listing area to be a link, including white space. So rather than make the images and text links individually, ive put the entire div in a link.
As I said, this is working fine on my computer, but is a good idea for a production site?
Thanks
If it's like a grid or something, and you give a visual cue when the user moves the mouse over the row (background color changing etc) along with the cursor becoming a hand, it should be fine if you use the whitespace as part of your link.
If you want me in your website's audience, I would prefer if you wouldn't. When switching between windows, clicking in the window area is the quickest way to switch focus between windows. If like 80% of your window is really a link, I would find that annoying. I think I am not the only one.
The way it sounds there is also plenty of area which you can make behave like a link, such as the image, and the text in the grid. If that would be clickable, that would be big enough a target to hit.
Also imagine your app being used on a touch screen. These sometimes imsinterpret drag (scroll/zoom) and tick gestures. Which is annoying if everything responds to clicks.
Look at the right-side video links on YouTube. These are block-layout spans wrapped in a tags. (Not that just because Google does it means it's a good idea, but...)
If the area has a :hover color (as these do), then it should be clear enough to the user that this is an action item.
Syntactically it's invalid, you cannot put block elements (div, p, table) inside of inline elements (span, a, strong, em).