I do marketing and communications for a small company where everyone wears many hats and I'm trying to independently make our blog a more user-friendly experience.
Here's the blog: https://blog.thrively.com
The website runs on WordPress using a third-party theme called Creative Child (I don't think this matters).
I've been able to make simple CSS changes within WordPress' Gutenburg editor, but I'm stuck trying to make the mobile experience responsive.
When I "inspect" on desktop and select the mobile view, I've discovered everything responds correctly until the width reaches 450px. At that point, the text just runs off the page to the right.
Here is the code that currently exists in the Simple CSS customization window where there is a "#"media section that applies to all screens less than 770px wide (this was here before I started with the company), so I thought there might be something in there that needs something added. Nothing I've tried has worked yet though.
Any advice would be greatly appreciated.
/* Enter Your Custom CSS Here */
#menu-primary-items {
position: relative;
top: unset;
left: unset;
}
#menu-primary-items .menu-item a {
font-size: 16px;
}
.wf-active .page-id-12165 .entry-title {
display: none;
}
.wf-active .page-id-12165 .entry-content img {
width: 100%;
}
#media (max-width: 770px){
.post-meta {display: none;
}
.post-details {display: none;
}
.site-header .logo{
position: absolute;
}
.headroom{
margin-top: 0px !important;
}
.menu-items{
top: 170px !important;
}
#masthead .site-header-container{
background: #fff;
}
.mean-container a.meanmenu-reveal{
margin-top: 10px;
}
.header-button-wrapper{
margin-top: 0;
}
#masthead {
position: absolute !important;
width:100%;
top:0;
}
.primary ul a, .primary ul a:visited{
color:#333333;
}
}
#primary .entry-title a{
text-align: left !important;
padding-bottom: 10px !important;
line-height: 1.3em !important;
}
.primary ul a, .primary ul a:visited{
color:#333333;
}
.site-header #blog-title{
color:#333333;
}
#primary .entry-title a{
padding-top:10px;
}
#menu-primary-items .menu-item a{
top: -165px !important;
}
.post p{margin-bottom: 20px !important;
}
.post content-width{width: 550px
}
.wp-block-cover {margin-bottom: 25px !important;
}
.wp-block-separator {margin-top: 20px !important; margin-bottom: 20px !important}
.entry-content{width: 650px !important;
}
.entry-title {
display: none;
}
.wp-block-cover__inner-container {width:80%; line-height: 50%
}
.wp-caption {display: none;
}
.entry-content ul {text-indent: -25px !important; margin-left: 25px !important; margin-bottom: 25px !important;
}
.entry-content ol {text-indent: -25px !important; margin-left: 25px !important; margin- bottom: 25px !important;
}
.col-md-5 {display: none;
}
Preview at 452px wide
Preview at 448px wide
Add the following style to css file.
#primary section.entry-content{ max-width: 100%; }
it will solve the issue
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I have a page with a jumbotron header. the page is - http://www.mzungu.co.il/article.php?id=10
The size of the jumbotron is 40vmax:
.jumbotron {
background-image:url('images/<?php echo $article_cover ?>');
background:repeat:no-repeat;
background-size: 100%;
height: 35vmax;
background-position:center center;
color:#fff;
text-shadow:2px 2px 4px black;
}
the code i have tried so far is:
.jumbotron h1,
.jumbotron .h1 {
position:relative; top 30vmax;
}
with many different variations of position (fixed, absolute, etc) and with "margin top". could not find something that would work for both pc and mobile view.
Also, i wanted to create a background just for the text part, like in this pic
this maybe can help you out.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_hero_image
and for the background of the text you may do it like this.
.h1 {
margin: 0 auto;
width: 100px;
h1 {
padding: 6px;
display: block;
border-radius: 30px;
background: rgba(192,192,192,.7);
box-sizing: border-box;
font-size: 22px;
line-height: 1.8;
text-align: center;
text-decoration: none;
color: #fff;
transition: all 1s ease-out;
position: relative;
}
}
I need to hack some the styles in GWT Clean theme.
For eg. .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #CCCCCC;
padding-left: 5px;
padding-top: 6px;
}
The above style exists in GWT Clean theme.
The following is the hacked one,
#external gwt-TabLayoutPanelTabs;
.gwt-TabLayoutPanelTabs {
background: none repeat scroll 0 0 #FFF000;
padding-left: 1px;
padding-top: 0px;
top: 0px;
width: 140px !important; }
In the UI i see the style in the Clean.css.
My hacked style is not applied.
But only the following lines are considered from my hacked Style
top: 0px;
width: 140px !important; `
These 3 lines are not applied
background: none repeat scroll 0 0 #FFF000;`
padding-left: 1px;
padding-top: 0px;
So can anyone help me?
Thanks in advance,
Gnik
It is fixed by adding !important; with all the properties.
We need to tweak the styling of the dropdown that shows the autocomplete place suggestions when using the Google Places/Maps Autocomplete API.
Does anyone know if this is even possible? If so, I guess we just need to know the CSS classnames/IDs.
There's a screen grab of the bit I am referring to here:
This is now documented by google: https://developers.google.com/maps/documentation/javascript/places-autocomplete#style_autocomplete
If you use firebug (as mentioned in a comment to your question...) you see that the container with the autocomplete results is a DIV with the class "pac-container" and the suggestions are inside it as a DIV with the class "pac-item". so just style with CSS.
This CSS will allow the drop-down to resize to fit the width of the results:
.pac-container, .pac-item {
width: inherit !important;
}
It is pretty difficult to inspect the elements since it closes as soon as it loses focus.
Though we know that the container has the .pac-container class and items have .pac-item, upon further investigating the API I found that it embeds the CSS styles in the document.
Here's what initially there, so use it to change the pre-defined styles to fit your needs.
.pac-container {
background-color: #fff;
position: absolute!important;
z-index: 1000;
border-radius: 2px;
border-top: 1px solid #d9d9d9;
font-family: Arial, sans-serif;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden
}
.pac-logo:after {
content: "";
padding: 1px 1px 1px 0;
height: 16px;
text-align: right;
display: block;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png);
background-position: right;
background-repeat: no-repeat;
background-size: 120px 14px
}
.hdpi.pac-logo:after {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png)
}
.pac-item {
cursor: default;
padding: 0 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
line-height: 30px;
text-align: left;
border-top: 1px solid #e6e6e6;
font-size: 11px;
color: #999
}
.pac-item:hover {
background-color: #fafafa
}
.pac-item-selected,
.pac-item-selected:hover {
background-color: #ebf2fe
}
.pac-matched {
font-weight: 700
}
.pac-item-query {
font-size: 13px;
padding-right: 3px;
color: #000
}
.pac-icon {
width: 15px;
height: 20px;
margin-right: 7px;
margin-top: 6px;
display: inline-block;
vertical-align: top;
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
background-size: 34px
}
.hdpi .pac-icon {
background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png)
}
.pac-icon-search {
background-position: -1px -1px
}
.pac-item-selected .pac-icon-search {
background-position: -18px -1px
}
.pac-icon-marker {
background-position: -1px -161px
}
.pac-item-selected .pac-icon-marker {
background-position: -18px -161px
}
.pac-placeholder {
color: gray
}
I case anyone is interested in the hierarchy I was able to scrape the following using Firebug:
<div class="pac-container pac-logo" style="width: 557px; position: absolute; left: 66px; top: 106px; display: none;">
<div class="pac-item">
<span class="pac-icon pac-icon-marker"></span>
<span class="pac-item-query">
<span>France</span>
</span>
</div>
<div>
This worked for me, and now I can run this on mobile!
.pac-container {
z-index: 10000 !important;
width: auto !important;
position: initial !important;
left: 0 !important;
right: 0 !important;
display: block !important;
}
.pac-container:empty{
display: none !important;
}
And this somewhere!
$('selector').append('.pac-container');
Now the results will show in the selected div as a normal block element :)
To force the box to stay open for much easier styling and inspection from dev tools you can set the input value from the JS console and the container will stay open when inspecting from the dev tools.
Simply run document.querySelector('.pac-target-input').value = 'CB' in the console on your page with the input, then go back to the Elements tab and you can now individually inspect each element.
This gets around the issue where it always closes when focus is lost.
if you want to create your custom html & css then AutocompleteService class is also available which will provide all data in json.
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions(
{ input: "provide location string here for search" },
(suggestions) => console.log(suggestions)
);
For easier debugging and styling. to keep the dropdown open.
use the following code in chrome console.
document.querySelector('.pac-container').style.display = 'block'
Also used following classes to style the suggested dropdown in google places auto complete
Update icons
.pac-icon {
background-image: url('./assets/locationMark.svg') !important;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 14px 18px;
}
Update text
.pac-item-query {
font-size: 16px
}
Hide google logo
.pac-logo {
padding: 10px 0;
&::after {
display: none;
}
}