I'm trying to get images on my Hugo site to display full bleed (edge to edge) only on mobile/tablet view. In desktop view, I'd like the images to remain constrained within the parent container. I'm using Tachyons CSS.
I've looked into the solution suggested here but it would require me to re-design the whole site to implement the additional columns and it's not mobile-only.
Another option I considered was removing the padding on the content column in mobile view. This has the intended effect as far as the images are concerned but it also means the text runs to the edge of the screen which makes it hard to read. Not a good solution.
To see an example of what I'm trying to do, please have a look here: https://brianli.com/. You'll notice that as you resize the browser window the images fill the viewport from edge to edge. In desktop view the images only extend to the edge of the container.
I'm grateful for any help or guidance you can provide.
Related
I'm creating a (react) component library for documentation and testing purposes for our company. A kind of style guide. Some of our components have styles that depend on media queries to scale up and down nicely.
Our style guide site is responsive but I would like to be able to render different screen sizes. As an example, I wanted to show how the site header looks like in desktop and mobile without having to resize the window, as if they were multiple iframes with different zoom levels.
So I was thinking if it was somehow possible to make html elements think they are being rendered in a larger or smaller screen by changing their zoom level. A sort of scaling, while staying within the same limits.
In google chrome there is a tool who do this.
Right Click > Inspect the element > The mobile icon at the top corner right
Check my screenshot below.
Cheers mate ;)
I'm working on a one-page-project that uses fullpage.js to create scrollable, viewport-filling secions. It's pretty straight-forward, on each slide there is one picture and some text. On devices with bigger viewports, I want the picture to float to the left and the text to appear at it's right side. For smaller viewports, I've added a media query that makes the picture fill the viewport width (width:96vw) and removed the float property (float:none; clear:both;). When I test this in any browser on my PC by reducing the size of the browser window, it works just fine, if the window's width reaches 800px (the condition in the media query is (max-width:800px)), the text jumps below the picture and the picture enlarges to the width of the browser window. The jsfiddle I created works as intended as well:
http://jsfiddle.net/GinSan/ehco10dh/
However, I've uploaded the project to my website and opened it on my android phone, and neither the Firefox nor the Chrome app seem to recognize the media query. It applies the float instead, which looks terrible in portrait orientation ... I've tried adding some more style-rules in the media query, none of which seem to be recognized by the mobile browsers.
I've stared at my media query for like half an hour, but I can't find any mistake. Can you? Or could this be related to the fullpage.js library? Or what else might be the problem? According to caniuse.com, media queries are supported by both android apps.
I would post a link for you to check out the problem yourself, but I'm not sure if I'm allowed to. Am I?
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
I have a number of image with a width of 100%. In every other browser this means that the image scales to fit its container, but in ie8 the images stretch vertically. Any ideas why? What can I do to prevent it.
You might be able to control images across multiple browsers more easily using a tool from imageresizing.net. Follow their installation instructions using NuGet, and then when referencing the image in your HTML use link parameters:
<a href="file.jpg?w=100&height=100&mode=max">
Check their basic commands documentation for other parameter options. I've used this tool for responsive web design and it scales fine using width, height, and mode parameters. see an example I implemented here.
I have done about 20 websites which included the Business Catalyst gallery module. This is the first one that I'm having problems with and I don't know why. Please check out: http://topspindenver.businesscatalyst.com/gallery.html.
You will notice that if you make the window smaller, the gallery thumbnails start overflowing the window. In every other website that I've done, the gallery was responsive within the specified skeleton columns, and the thumbnails automatically get smaller, like on this site: http://mountaingardendiva.com/.
Does anyone know why this is happening only on this site? I have already tried specifically targeting the table that the thumbnails sit in and given it a max-width:100%, but it didn't work.
I'm guessing you're using Firefox to view this site and noticing this problem for the first time, because it looks fine in Chrome. It has to do with how Firefox computes the width of a table and the max-width of images within the table. You can solve the problem by applying a max-width to td.photogalleryitem with each media query that changes the page width.
It does work in Chrome, but to make it work in FireFox try setting the css on your images to width:100% instead of max-width:100%