• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

HTML Object - Responsive width AND height?

Explorer ,
Jan 20, 2018 Jan 20, 2018

Copy link to clipboard

Copied

Is there any way to get an HTML object to resize respnsive both width AND height? I have a lot of pages I collect from a website containing one image/page pr. HTML object, and it will only resize the width.

<img style="-webkit-user-select: none;max-width: 100%;" src="https://www.vegvesen.no/public/webkamera/kamera?id=803045">;

Views

5.5K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Guide , Jan 21, 2018 Jan 21, 2018

I found a solution for you. Create a graphic style and apply it to all the desired objects.

36ed72ced8.png

Paste the following code into the head (page properties> html for head)

<style>

.responsiveConteiner {

min-height: auto !important;

}

</style>

75d3b71dab.png

Instead of .responsiveConteiner, insert your graphic style name.

After these actions, inside the Muse this will work as before, without changes.

eb4ce252cb.png

But inside the browser it will work fine, as you want.

4c07a29084.gif

Votes

Translate

Translate
LEGEND ,
Jan 20, 2018 Jan 20, 2018

Copy link to clipboard

Copied

that code will not work but yes it is possible with some code skill... I remember Pavel Homeriki made some a while back

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

I answered you via PM...But even your code works great. I do not understand what your problem is.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Hi, and thanks for your reply.

The problem is the height - it wont resize. I am using responsive layout, and when I open the page on the phone everyting is pushed down. It resizes OK on width, but nothing on height.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Here is a samle;2018-01-21_13-01-14.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Ok, I get it. You mean the container inside the Muse.

4901b6aa0a.png

Unfortunately this can not be solved with the help of css only, since it is the internal container that Muse creates when the code is placed on the page. Perhaps (I'm not sure) this can be solved with mucow, but you will need special knowledge for this. MuCow Documentation

Pay special attention to the <builtIn> tag and its values. Or you will need to hire a specialist for this.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guide ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

I found a solution for you. Create a graphic style and apply it to all the desired objects.

36ed72ced8.png

Paste the following code into the head (page properties> html for head)

<style>

.responsiveConteiner {

min-height: auto !important;

}

</style>

75d3b71dab.png

Instead of .responsiveConteiner, insert your graphic style name.

After these actions, inside the Muse this will work as before, without changes.

eb4ce252cb.png

But inside the browser it will work fine, as you want.

4c07a29084.gif

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 21, 2018 Jan 21, 2018

Copy link to clipboard

Copied

Hi, and thanks for ur excellent help. That works perfect 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 17, 2018 Jul 17, 2018

Copy link to clipboard

Copied

LATEST

Pavel Homeriki you are a genius.
Thank you so much.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines