Change Margin When Screen Size Change
Salem Benmubarak
I have a heading element on the home page I need to change the margin based on the screen size so, on a tablet or mobile please find the attached picture the heading <h2> Patient Feedback, I put a class ID for the element .feedbackh2 https://picallow.com/patient-feedback-h2-tag and I added the following code to the template.css file @media (max-width: 767px) { .feedbackh2 { margin: 0 !important; } }
but it doesn't work could you please help me ASAP
Regards
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us. Could you please give me any screenshot of it? Which portion margin do you want to change?
-Regards.
Salem Benmubarak
Accepted Answer
this is the item i want to change the margine for it
currenting is nigative value want to make 0 or positave value on phone an tablet
Salem Benmubarak
Accepted Answer Mehtaz Afsana Borsha
Accepted AnswerCould you please enable right click? Otherwise I cant check devtools.
Salem Benmubarak
Accepted Answerstrange its already disabled https://picallow.com/patient-feedback-home-page but I deleted the pulging now can you check please
Mehtaz Afsana Borsha
Accepted AnswerHi
I need it enable. Because without it I cant check your sites issue.
Salem Benmubarak
Accepted AnswerWhat I meant I disabled the pluging
right click its enabled , please check
Mehtaz Afsana Borsha
Accepted AnswerHi
I have checked again. but its still not possible to check the devtools.
Salem Benmubarak
Accepted Answerright click is enabled and dev tools is enabled is there any one here can check and confirm to the support teams the the right click is working and also the dev tools https://boutiquedentalis.co.uk/index.php please see the attached picture https://picallow.com/patient-feedback-right-click-is-enabled/
Mehtaz Afsana Borsha
Accepted Answer Mehtaz Afsana Borsha
Accepted AnswerHi
Use this custom CSS in your custom.css file
.sppb-addon.sppb-addon-header.feedbackh2{
position:relative;
left:200px;
}
Salem Benmubarak
Accepted AnswerThere is one more thing I need your help with when I change the window size on the header part, the problem I face is that menu elements go to the following line of the logo, which I don't want if there is a way either to resize the logo size or the menu font size or the margin between of the menu head please see the attached picture, which will describe the issue more
https://picallow.com/menu-width-change/
Please try to help me as fast as you can
Thanks
Pavel
Accepted AnswerTo solve this problem, CSS coding for several screens is required. If you are not a specialist, just hire someone. I would not count on support in this matter. At least this is outside the Joomshaper support ...
Pavel
Accepted AnswerCould you please enable right click? Otherwise I cant check devtools.
Hi Mehtaz. Do you know about existing of browser menu, where you can run dev tools without right click :)
Use this custom CSS in your custom.css file
CSS is not required for this, this setting is in every addon (Advanced Tab). But in OP case, this is not required at all.
In each addon there is margin settings (Style Tab) for different screens.
Mehtaz, you continue to provide a strange, and at times even harmful support, and do not learn anything. Take SP Page Builder and make at least one site yourself, then you can provide a more qualified support
Pavel
Accepted AnswerHi Salem. feedbackh2 { margin: 0 !important; } did not work, because margin-left -200px is set for its parent block. And this comes from the settings of the addon. Use the margin settings in the addon. You don't need CSS for this.
Pavel
Accepted Answerthank you for your help I will try but you don't think this is part of the (Nuron) template configration as if I change the screen size of the page some gaps appears next to the menu thanks
Hi. This is not related to the configuration of the template. You placed more things in the box than can get into it with responsive conditions. If you do not have CSS skills, then a good starting point for you is 1000 px screen width. Reduce the number of menu items and the font size so that everything is fine on this width.