cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
chrisOrtiz
Helper II
Helper II

Resizing Header to allow image to fit within whole space

I am replacing a logo into a full image and needs to fit within all of the header. Now that I placed the image, the header is viewable and does not look good, image below:

chrisOrtiz_0-1618363918706.png

I was changing the height from the Header code but nothing was changing: 

chrisOrtiz_1-1618364315718.png

And the size of the image is set to: 

style="width: 100%; height: auto;">
I cant do much with the image since its already set to the limit. Can someone help me out here? I have been on here and searching for resizing on google but nothing seems to work.

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @chrisOrtiz :

I suggest you clear all the codes and use this code separately

<head>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyk4WNsT-h5vXlay4iSgtFDTE_pXkz9mvFbQ&usqp=CAU" width=100%></div>
</head>

Best Regards,

Bof

 

View solution in original post

16 REPLIES 16
v-bofeng-msft
Community Support
Community Support

Hi @chrisOrtiz :

 The key is that each container (div) has a height and a width. If you need a picture to fill your header. Then use this code directly.

<head>
  <div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyk4WNsT-h5vXlay4iSgtFDTE_pXkz9mvFbQ&usqp=CAU" width=100%></div>
</head>

1.PNG

Best Regards,

Bof

ragavanrajan
Super User
Super User

Hi @chrisOrtiz 

 

Looks like you are using a custom portal. If you set your width to style="width: 100%; height: auto;" then in the header web template try to remove the <div> tag before <img> on line 4. Then save it. 

 

In-studio > you have to do the sync configuration and press ctrl + F5 on your browser. 

 

find it.

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other us

chrisOrtiz
Helper II
Helper II

@v-bofeng-msft I tried your code. This is what it looks like: 

<div><img src="/EPSCoR1.png" width=100%> </div
below is the result, the black space on the top is no longer there which is an improvement
chrisOrtiz_0-1618374880068.png

@ragavanrajan I also tried your way and got the exact same results as the image above 

chrisOrtiz_0-1618375345112.png

 

chrisOrtiz_1-1618375390537.png

 

@chrisOrtiz  Could you please confirm the portal type. Should be fixable. 

chrisOrtiz
Helper II
Helper II

@ragavanrajan Portal type is "Portal from blank" environment type production. Is that what you are referring too?

chrisOrtiz
Helper II
Helper II

chrisOrtiz_0-1618375937529.png

Yes its Custom Portal

Thanks, @chrisOrtiz,  The code block you are showing, is that the Header web template screenshot? 

chrisOrtiz
Helper II
Helper II

@ragavanrajan  yes hat is the code block from the Header web template

Thanks again. Mine is probably an upgraded portal.  Header web template looks really different. 

 

As per @v-bofeng-msft , 

 

In portal studio: 

 

1. Click on the header section 

2. On your left > Navigation menu > It should be in Default > Choose any navigation menu you like 

3. Now click the code editor > and paste in the code which Bof as provided

4. You can see the full width of the image. 

 

Please let us know the result. 

 

Hope it helps. 

------------

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

 

 

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

MBAS Attendee Badge

Claim Your Badge & Digital Swag!

Check out how to claim yours today!

secondImage

Are Your Ready?

Test your skills now with the Cloud Skill Challenge.

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Top Solution Authors
Users online (45,803)