[Matthew]

I am trying to change the width of the Google Map. I have made changes to the layout of the Market template, but the width of the map is always set to 426px, which may be either set to 426px or a percentage of the container width. In either case, I cannot find any place that sets this. If I look in the market.php file i see a setting for the height that can be changed and will display properly if it is changed.
$permittedAtts['map_frame_height'] = 400;
I do see a reference to the width of the map frame in the card.php and the single-card.pfp files.

$gMap = $entry->getMapBlock( array(
			'height' => $atts['map_frame_height'] ,
			'width'  => ( $atts['map_frame_width'] ) ? $atts['map_frame_width'] : NULL ,
			'return' => TRUE ,
			'zoom'   => $atts['map_zoom']
			)

But I find no other reference to it where i can set the parameters. I tried changing it to match the height:

'height' => $atts['map_frame_height'] ,
'width'  => $atts['map_frame_width'] ,

and added a line to the market.php file underneath the height setting:

$permittedAtts['map_frame_height']                = 400;
$permittedAtts['map_frame_width']                 = 658;

But is does nothing.

Attachments:

You must be logged in to view attached files.

[Steven Zahm]

@ Matthew

The map_frame_width width is calculated dynamically based on the card_width value.

How did you change the width of Market, here’s the supported method.

[Matthew]

Here is my CSS styling that I use for the Market template:

#cn-gmap{
  width:100% !important;
}

.email-name, .cn-separator, .address-name, .phone-name, .link-name {
display: none !important;
}

#cn-market h3 {
font-size: 18px;
}

#cn-list{
 width:920px !important; 
  
}

/*
#cn-list .cn-clear{
  clear:none !important;
}
*/

#cn-list-head{
  width:900px !important;
}

#cn-list-body{
 width:690px !important; 
 
padding-top:10px;
}
.cn-entry{
  font-size: 16px !important;
width:690px !important;
}
span{
  line-height:20px !important;
margin-bottom:0px !important;
}
div#cn-list span.title {
 font-style:italic !important; 
}

div#cn-market div.cn-search input#search-submit {
width:50px !important;
  height:25px !important;
}

[Matthew]

I have it working now. Thanks

[Steven Zahm]

@ Matthew

Great to hear! Did you use the method outlined in the FAQ I linked to in my previous reply?

[Matthew]

I did, but I wanted to make the card responsive, so i still had to make CSS changes:

#cn-list{
width:100% !important; 
min-width:500px !important;
}

#cn-list-body{
 width:80% !important; 
 min-width:500px !important;
}

I couldn’t get the map to be responsive by not setting a width or trying to set a width percentage 100%, however, what did work was to set the card_width=(100%) with parenthesis. This only works if I use it in combination with the CSS changes. I don’t know why, but it works if I use them all together.

[Steven Zahm]

@ Matthew

Thanks for the feedback! I’ll see what I can do to bake this into Market.

[Author]

Posts