SharePoint 2013 page layout problem with width adjustment when zoom in/out or diff client views - CSS is not applying

Question

Hello community,

Please, i have a problem with a page layout and the page itself... I have created some page layouts and some pages using the new layouts and added a call to the CSS that auto adjust the size of the content to 100%.

My problem is when creating a new page and adding some images in the RichImageFields and set the width to 100% in the ribbon (SharePoint page editor) and saving the page, it applies a specific width and overwrrites the CSS linked. Even adding a Script Editor webpart and appliying the CSS to ".img, .ms-rtestate-field, .column with important¡" doesn't fix the problem.

When adjusting the width via editor, this overwrrites the CSS, the width is added by sharepoint and i cannot delete it from editor.

Tried using Script Editor, but no luck.

Layout code:

Page Image overlap (phone view):

Desktop overlap, zoom in:

Can be this achieved by some way? JS?

Appreciate your help.
Regards,
LC.

Answer 1

Hi @Luis David Colón Vegas ,
Try to use the below css instead:

.ms-rtestate-field>img{  
    width: 100% !important;  
}  

---

If an Answer is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.