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

Responsive layout on phone

Explorer ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

Hi,

I'm using RH2022.3 and the Azure Blue responsive template. It appears to work well on an iPad, but when I view on a phone, any graphics are tiny.

For example, on an iPad, I see:

Jo_Pearson_2-1700500683373.png

While on a phone, it is tiny.

Jo_Pearson_4-1700501168028.png

I realise they'll be small on a phone, but I need them to be a little larger than this. Is there a setting I've missed, or something I need to add to get the graphics to show as more than a tiny box on a phone?

 

When I've had this problem on a website I coded myself, I needed to add the following code, but that doesn't seem to make any difference here.

<metaname="viewport" content="width=device-width, initial-scale=1">

 

Thanks.

 

 

 

 

 

Views

54

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
Community Expert ,
Nov 20, 2023 Nov 20, 2023

Copy link to clipboard

Copied

Because you're using Responsive HTML you probably can't modify that directly.

 

In the template switch to phone view using the icon at the top of the page and double-check for any relevant setting.

 

If not (as i suspect) you'll have to inspect the output using the developer tools, with the browser resized to phone size, to figure out what css is causing it. Then add a custom css file with just that change to the User Assets section in the template.

 

It'll probably be something like the following - values made up, but provided as an idea what to look for.

 

@media screen and (max-width: 768px) {

  img {

    width: 50%;

  }

}

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 ,
Nov 21, 2023 Nov 21, 2023

Copy link to clipboard

Copied

LATEST

That's really useful, thanks very much. I had looked for a setting in the template in phone view, but I couldn't find anything, so I shall do as you suggest with creating a custom css file.

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
Resources
RoboHelp Documentation
Download Adobe RoboHelp