164
Views
9
Comments
Solved
Need to apply responsive CSS
Application Type
Reactive

Hello Everyone,

I need help to apply responsive css. Whenever I zoom out the screen then my applied css get changed and screen looks different. can anyone help me out on this one ? I have attached my oml here. Please refer it and make changes into the CSS part. 

Thanks in advance.


ResponsiveCSS.oml
2019-11-06 14-40-03
dauster
Solution

@Ajit Kurane I download your OML and put on html and I have made some changes. I have achieved this behavior. The. first one is your solution the second one is my solution. Enjoy

css-zoom-out.zip
2024-01-31 05-29-41
Akshay Deshpande
Solution

Hey Ajit,

I have updated your oml and attached same oml, may be this is helpful for you 

Thanks and regards,

Akshay Deshpande

ResponsiveCSSNew.oml
2019-11-06 14-40-03
dauster

What do you want to achieve ? I haven't got the idea , please attach more images

2025-04-17 05-42-16
Ajit Kurane

I have applied css over an image and on browser when I zoom out the screen then it gets changed (look of screen),

Thanks,

Ajit Kurane

2019-11-06 14-40-03
dauster

The secret to have image responsive in css is put width equals 100%, because no matter what you zoom in or zoom out the image will be resize for fit the current viewport  

2023-10-21 19-42-11
Tousif Khan
Champion

Hello

What are you trying to achieve here, can you please elaborate  it more so that we can understand

but if you want to play around with css then check background and image Css,

If you want to use image and text over it you can try this UI Widget available

https://outsystemsui.outsystems.com/WebStyleGuidePreview/CardBackground.aspx

Thanks

2023-09-01 08-29-06
Hasan Derawan
Staff

Hi Ajit,


You can use percentages instead of fixed pixels. For example, height: 25%; instead of height: 100px;.


Regards,

2025-04-17 05-42-16
Ajit Kurane

I did it but still issue is the same.

2022-07-28 08-07-39
Jitendra Kumar

Hi @Ajit Kurane ,

I have done same kind of thig in my application what you can do is provide some condition on extended class like:

If(DaysList.Current.WeekDate=SelectedDate,"selectedboxclass","specialclass") in this case if my weekdate =selectedDate then it will use selectedboxclass else it will use specialclass. and you can define properties of class as per your convinience.

Thanks,

Jitendra

2019-11-06 14-40-03
dauster
Solution

@Ajit Kurane I download your OML and put on html and I have made some changes. I have achieved this behavior. The. first one is your solution the second one is my solution. Enjoy

css-zoom-out.zip
2024-01-31 05-29-41
Akshay Deshpande
Solution

Hey Ajit,

I have updated your oml and attached same oml, may be this is helpful for you 

Thanks and regards,

Akshay Deshpande

ResponsiveCSSNew.oml
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.