Solved
Resizing in Mobile Version
Hi, I am introducing several images in html, using css styles with position (top and left coordinates) and size (height and width). Some of the images fit in the mobile size version (whatever the number of pixels you consider as mobile) and some of the images do not fit in the mobile version. The problem is that the images that do not fit in the mobile version are automatically resized; and the images that fit stay the same, causing the output look nothing like I planned. Moreover, I cannot fix it without destroying the desktop version. Is there an easy way to scale down to half all images when the the survey is in mobile size?
Thanks
Best answer by mattyb513
Perhaps what you are looking for is conditional CSS.
You can use @media queries to conditionally add CSS depending on the screen width. For reference: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Essentially you do something like this:
```css
.picture {
width: 500px;
height: auto;
}
@media (max-width: 760px) {
.picture {
width: 250px;
}
}
```
View original
+39See below discussion:-
https://www.qualtrics.com/community/discussion/665/resize-video-to-fit-screen-e-g-mobile-phone#latest
Thanks, but that was not very helpful. My guess is that the solution should be inside the css code, since there is where I am defining all the properties for the pictures. I tried with the @media command, but I was unable to solve it.
1 person likes this
+6Perhaps what you are looking for is conditional CSS.
You can use @media queries to conditionally add CSS depending on the screen width. For reference: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Essentially you do something like this:
```css
.picture {
width: 500px;
height: auto;
}
@media (max-width: 760px) {
.picture {
width: 250px;
}
}
```
> @mattyb513 said:
> Perhaps what you are looking for is conditional CSS.
>
> You can use @media queries to conditionally add CSS depending on the screen width. For reference: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
>
> Essentially you do something like this:
>
> ```css
> .picture {
> width: 500px;
> height: auto;
> }
> @media (max-width: 760px) {
> .picture {
> width: 250px;
> }
> }
> ```
Thanks, is it possible to first define the size of a picture and then automatically half it with the @media? Or do I have to manually calculate half of all my widths and redefined them one by one? The following code did not work:
```css
.picture {
width: 500px;
height: auto;
}
@media (max-width: 760px) {
.picture {
width: 50%;
}
}
```
1 person likes this
+6@Kaneko
It's not really clear to me what you are trying to do, and I didn't expect that code to just work, you would need to modify it to make sure the classes matched and the widths were what you expected.
I'm not sure why you are using `position: absolute` for your images, but that is likely what is causing your problem, since positioning them absolutely will allow other elements to become trapped behind them.
If you'd like further help it would be insightful to post a link to the survey, directly to the page having issues, and post the code you are currently using.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.