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
Microsoft 365 Conference – December 6-8, 2022

Microsoft 365 Conference – December 6-8, 2022

Join us in Las Vegas to experience community, incredible learning opportunities, and connections that will help grow skills, know-how, and more.

MPP IDEAS updated 768x460.png

Ideas

Discover ideas and concepts from users like you for how to use Power Pages and take your work to the next level.

Top Solution Authors
Users online (3,430)